jQuery 可拖动项目在被交换后失去了可拖动性（以 jsfiddle 为例）答案

【问题标题】：jQuery draggable items lose their draggability after being swapped (with jsfiddle example)jQuery 可拖动项目在被交换后失去了可拖动性（以 jsfiddle 为例）
【发布时间】：2011-01-04 00:15:52
【问题描述】：

我有两个 li 元素，它们是 jQuery 可拖动的。当我将框“一”拖放到框“二”上时，它们会被交换。到目前为止，一切都很好。（延迟修复了here 中描述的另一个问题。）但是，即使在重置了它们的可拖动选项之后，这些元素现在也不能再拖动了。

任何想法如何解决这个问题？ 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>

【问题讨论】：

对我来说，.replaceWith() 不像 clone 那样复制数据和事件。我不知道你最终想要做什么，但我想知道你是否可以只使用 sortable 而不是交换实际元素。像这样：jsfiddle.net/Ymhpt/2
.replaceWith 复制事件处理程序。为了测试，我将点击事件绑定到每个 li。交换后，点击仍然有效。我有几个 li 并且 Sortable 移动了一些，而我只想交换其中两个，同时保持其他不变。

标签： jquery jquery-ui

【解决方案1】：

所以在玩过你的代码之后，这是我得出的结论。

看起来可拖动的 jqueryui 方法正在单独跟踪其对象。克隆时，不会克隆该跟踪。我修改了你的代码如下：

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);
        });
    };

你可以看到精彩的结果http://jsfiddle.net/XkUDv/16/

如您所见，如果拖动新的克隆对象，它会移动原始对象，而不是克隆对象。

这不是一个答案，但我希望它有所帮助。

更新：

仔细查看克隆后，我将 javascript 更改为：

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

现在它可以按照你想要的方式工作了:)

我猜问题是因为 clone(true) 复制事件处理程序，当您尝试将可拖动对象重新附加到新克隆时，它会看到旧的事件处理程序并忽略元素。所以我没有clone(true)，而是把它改成了clone();

希望有帮助！

工作版本：http://jsfiddle.net/XkUDv/21/

【讨论】：

谢谢。似乎“销毁”选项并没有破坏有关可拖动对象的所有内容并重新开始。
您应该有var options = ... 以避免全局范围污染。此外，将$('#one') 和$('#two') 缓存在第一个匿名函数（其中定义了选项）的局部变量中将避免在放置事件期间不必要的DOM 遍历。