交换两个无法正常工作的 jQuery 可拖动列表项（以 jsFiddle 为例）答案

【问题标题】：Swapping two jQuery draggable list items not working properly (with jsFiddle example)交换两个无法正常工作的 jQuery 可拖动列表项（以 jsFiddle 为例）
【发布时间】：2011-01-03 20:48:21
【问题描述】：

当框“一”被拖放到框“二”上时，下面的极简工作示例交换了两个框。问题是当盒子'one'被丢弃时，它的样式有'top'和'left'值，导致它被放置在远离它应该丢弃的地方。它的类包括“ui-draggable-dragging”。似乎顶部和左侧的值与放置前拖动元素的数量有关。并且拖动被“中断”，因此剩余的“ui-draggable-dragging”类？

为了让交换无缝工作，我缺少什么？ full jsfiddle example 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) {
            $(ui.draggable).swapWith($('#two'));
            }
        });
        });
    </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>

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

这是我的解决方法。

我的猜测是，在没有查看和理解 jQuery 的内部拖放功能的工作原理的情况下，在拖放中的所有内容完成处理之前还有一段时间。

所以我认为在一切完成之前不应启动交换。因为我不知道什么时候会发生这种情况，所以我在延迟后进行了交换。我在 drop 事件中使用了 setTimeout。我必须使用至少 600 毫秒来确保“一切都清楚且安全”。不到 600 毫秒，“顶部”和“左侧”仍有一些值，这意味着该过程尚未完成。延迟时间越长，这些值越小；直到任何更大的东西的顶部和左侧都为零。通过反复试验，600 毫秒似乎可以做到。

如果有人有“更清洁”的解决方案，我将不胜感激。加上“科学”的解释很有帮助。

【讨论】：

【解决方案2】：

在您的另一篇文章的延续中，我添加了 helper: 'clone' 选项，然后告诉脚本使用 .ui-draggable-dragging 类删除任何元素

    <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,
                helper: 'clone'
        };

        $("li").draggable(options);
        $('#wrapper').droppable({
            drop: function(event, ui) {
    //      window.setTimeout(function(){
                $('#one').swapWith($('#two'));
                $(".ui-draggable-dragging").remove();
                $("li").draggable(options);
    //}, 1);
            }
        });
    });

</script>

工作示例：http://jsfiddle.net/XkUDv/26/

希望有帮助！

PS：我之前没有使用过 jsfiddle，所以感谢您向我展示了这一点:)

【讨论】：