7

I have two li elements which are jQuery draggable. When I drag and drop box 'one' over box 'two', they get swapped. So far so good. (The delay fixes another problem described here.) However the elements now are not draggable anymore, even after resetting their draggable option.

Any ideas how to fix this? full working jsfiddle here

<html>
<head>

    <script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="includes/jquery-ui-1.8.2.custom.min.js"></script>

    <script type="text/javascript">

        jQuery.fn.swapWith = function(to) {
            return this.each(function() {
                var copy_to = $(to).clone(true);
                var copy_from = $(this).clone(true);
                $(to).replaceWith(copy_from);
                $(this).replaceWith(copy_to);
            });
        };



        $(document).ready(function() {

            options = { revert: true};

            $("li").draggable(options);

            $('#wrapper').droppable({
                drop: function(event, ui) {
                window.setTimeout("Swap()", 600);
                }
            });
        });

        function Swap() {
            $('#one').swapWith($('#two'));

            //trying to fix problem where elements can't be dragged anymore
            $("li").draggable("destroy"); 
            $("li").draggable(options);
        }
    </script>

</head>
<body>
    <form>
    <ul id="wrapper">
        <li id='one'>
            <div style="width: 100px; height: 100px; border: 1px solid green">
                one<br /></div>
        </li>
        <li id='two'>
            <div style="width: 110px; height: 110px; border: 1px solid red">
                two<br /></div>
        </li>
    </ul>
    <br />
    </form>
</body>
</html>
2
  • To me, it looks like .replaceWith() doesn't copy data and events like clone does. I don't know what you're trying to do ultimately, but I'm wondering if you can just use sortable rather than swapping the actual elements. Like so: jsfiddle.net/Ymhpt/2 Jan 4, 2011 at 0:32
  • .replaceWith copies event handlers. To test, I bind click event to each li. After the swap the click still worked. I have several li's and Sortable moves some around when all I want is to swap just two of them while keeping the others intact. Jan 4, 2011 at 0:57

1 Answer 1

3

So after playing with your code, here's the conclusion I've come to.

It looks like the draggable jqueryui method is tracking its objects seperately. When you clone, that tracking isn't cloned. I modified your code as follows:

jQuery.fn.swapWith = function(to) {
        return this.each(function() {
            var copy_to = $(to).clone(true).appendTo($("#wrapper"));
            var copy_from = $(this).clone(true).appendTo($("#wrapper"));
    //$(to).replaceWith(copy_from);
    //$(this).replaceWith(copy_to);
        });
    };

You can see the fascinating results http://jsfiddle.net/XkUDv/16/

As you can see, if you drag the new cloned objects, it moves the original, not the cloned one.

It's not an answer, but I hope it helps.

UPDATE:

after taking a closer look at clone I changed the javascript to:

<script type="text/javascript">

    jQuery.fn.swapWith = function(to) {
        return this.each(function() {
            var copy_to = $(to).clone();
            var copy_from = $(this).clone();
            $(to).replaceWith(copy_from);
            $(this).replaceWith(copy_to);
        });
    };



    $(document).ready(function() {

        options = { revert: true };

        $("li").draggable(options);
        $('#wrapper').droppable({
            drop: function(event, ui) {
            window.setTimeout(function(){
                $('#one').swapWith($('#two'));
                $("li").draggable(options);
            }, 600);
            }
        });
    });
</script>

Now it works the way you wanted :)

I'm guessing the issue is that since clone(true) copies the event handlers, when you try to reattach the draggable to the new clones it sees the old event handlers and ignores the elements. So instead of clone(true), I changed it to clone();

hope that helps!

Working version: http://jsfiddle.net/XkUDv/21/

2
  • Thanks. It seems the 'destroy' option doesn't destroy everything about the draggables and start fresh. Jan 4, 2011 at 1:17
  • 1
    You should have var options = ... to avoid global scope pollution. Also, caching $('#one') and $('#two') in local variables of the first anonymous function (where options is defined) will avoid unecessary DOM traversals during your drop event. Jan 4, 2011 at 23:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.