Question

下面的极简主义工作示例在框“'一个'被拖放到方框'二'时交换两个方框。问题是当盒子'one'掉落时，它的风格有'顶'和' 'left'值使它远离它应该掉落的位置。它的课程包括'ui-draggable-dragging'。它似乎是顶级＆amp;左侧值与放置之前拖动元素的数量相关。拖延被“打断”，因此残留的“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>

Answer 1

这是我的解决方法。

我的猜测是，在没有查看和理解jQuery的内部拖放和拖动内容如何工作的情况下，在拖动和放置中的所有内容之前已经过了一些时间。 drop已经完成处理。

所以我认为在完成所有工作之前不应启动交换。因为我不知道什么时候发生这种情况，我有一些延迟之后发生了交换。我在drop事件中使用了setTimeout。我不得不使用至少600毫秒来确保“一切都清晰安全”。不到600毫秒，'顶级'和'left'仍然有一些价值，这意味着这个过程还没有完成。延迟越长，这些值越小;直到任何更大的顶部和左边相等的零。通过反复试验，600毫秒似乎就这样做了。

如果有人有“更清洁”的解决方案，我会很感激。此外，“科学”解释也很有用。

Answer 2

继续你的其他帖子，我添加了帮助：'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，所以感谢你们向我展示：）

交换两个jQuery可拖动列表项不能正常工作（使用jsFiddle示例）

2 个答案: