Home/ Questions/Q 3627184
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T23:51:22+00:00

I have two li elements which are jQuery draggable. When I drag and drop

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0