交换后jQuery可拖动项目失去了可拖动性(使用jsfiddle示例)

我有两个li元素,它们是jQuery draggable.当我将盒子’one’拖放到方框’two’上时,它们会被交换掉.到现在为止还挺好. (延迟修复了 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>

解决方法

所以在玩了你的代码之后,这是我得出的结论.

看起来可拖动的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)复制事件处理程序,当您尝试将draggable重新附加到新克隆时,它会看到旧的事件处理程序并忽略这些元素.所以我没有克隆(true),而是将其更改为clone();

希望有所帮助！

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

交换后jQuery可拖动项目失去了可拖动性(使用jsfiddle示例)

解决方法

猜你在找的jQuery相关文章