Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Select element value not maintained when dragging #260

Closed
MarcosLopezC opened this issue Nov 16, 2015 · 5 comments
Closed

Select element value not maintained when dragging #260

MarcosLopezC opened this issue Nov 16, 2015 · 5 comments
Labels
support

Comments

@MarcosLopezC
Copy link

When dragging an item containing a <select> element, the <option> selected in the original item is not the same as the <option> selected in the mirror element.

Here is a short example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dragula bug</title>
        <link rel="stylesheet" href="dragula.css">
        <style>
            div.container {
                margin: 20px auto;
                padding: 20px;
                width: 400px;
                height:160px;
                background-color: #600;
            }
            div.item {
                padding: 20px;
                background-color: #fff;
            }
        </style>
    </head>
    <body>
        <div id="container1" class="container">
            <div class="item">
                <select>
                    <option>INCORRECT</option>
                    <option>Correct</option>
                </select>
            </div>
        </div>
        <div id="container2" class="container">
        </div>
        <script src="dragula.min.js"></script>
        <script>
            dragula([
                document.getElementById("container1"),
                document.getElementById("container2")
            ]);
        </script>
    </body>
</html>
  1. Select the correct option in the item.
  2. Drag the item from container1 into container2.

Note that as you drag the item the incorrect option is being displayed on the mirror element.

I've tested this in Firefox and Chrome.
@bevacqua bevacqua added support and removed support labels Nov 16, 2015
@bevacqua
Copy link
Owner

This is a limitation on the way how .cloneNode works, and it'd be best if you just fixed the value on your end with the cloned event.

@MarcosLopezC
Copy link
Author

Would it be possible to add an option that allows me to provide a callback that generates the clone element? Although in the example I provided above modifying the mirror element is fairly trivial, in the project I'm currently working on it would be easier for me to generate clone myself than to modify an existing element.

@bevacqua
Copy link
Owner

No, sorry. Use the cloned event to change the just-cloned element.

@bevacqua
Copy link
Owner

See #248

@MarcosLopezC
Copy link
Author

For anyone reading this in the future, I managed to work around the limitations of cloneNode() by adding the selected attribute to the <option> element as soon as its <select> parent element gets changed.

$("#container").on("change", "select", function() {
   var index = this.selectedIndex;
   $(this)
      .find("option")
      .removeAttr("selected") // Changes the selectedIndex. That's why I saved a copy.
      .eq(index)
      .attr("selected", "selected"); // Attributes will get cloned, properties will not.
});

I'm using jQuery for this, but you could do it as well with just JavaScript.

Hope this helps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
support
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bevacqua @MarcosLopezC