Question

我有一个拖放系统，一切正常。我有多个可以放置的div和多个可拖动的div。然后我实现了一个克隆系统到droppable区域，所以我的droppable divs都可以克隆，这也很好。

当我尝试将元素拖到克隆的可拖动区域时出现的问题。可拖动的div不会将克隆的可放置区域检测为可放置区域，我只能将元素拖动到原始的放置区域。

我是否需要更新某些内容以让可拖动的div知道有新的元素可以删除？

--- --- EDIT

对于遇到同样问题的每个人，您需要在克隆之前销毁droppable。所以在你的克隆函数中，只需把这个

$(".drop").droppable( "destroy" );

然后克隆，然后再次调用droppable函数。

Answer 1

您是否在设置中使用jQuery UI？一旦移动，您应该尝试更改可拖动div的类名。尝试使用：

$( "#draggable" ).addClass( "newClassName" );

完成后，设置您的droppable以接受该项目。听起来像jQuery UI认为你的项目已被删除。

 $( "#droppable" ).droppable({
      accept: ".newClassName",

Answer 2

要实现您所寻找的目标，您可以通过调用drop事件的更新功能来重新初始化新创建的droppable。我使用你提供的例子来到这里。尝试一下。

$(document).ready(function () {
             $(".duplicatedrop").click(
            function () {
            $(".drop").clone(true, true).appendTo(".drop");
            }
        );

    $(function() {
        $( ".drag" ).draggable({
            revert: true,
            cursor: 'move'
        });
    });


    updateDroppables();

    function updateDroppables(){
        $( ".drop" ).droppable({
            accept: ".drag",
            drop: function(event, ui) {
                $(this).find( "p" ).html( "Dropped!" );
                var clone = $(this).clone();
                clone.appendTo('body');
                updateDroppables();
            }
        });
    };
});

Droppable无法使用克隆元素

2 个答案: