Droppable 不适用于克隆元素

Posted 2023-05-08

【中文标题】Droppable 不适用于克隆元素

【英文标题】：Droppable not working with cloned element

【发布时间】：2016-12-29 06:51:42

【问题描述】：

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

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

我需要更新一些东西让可拖动的 div 知道有新的元素是可放置的吗？

---编辑---

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

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

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

【问题讨论】：

在不知道您使用的是什么插件的情况下，我的猜测是，是的，您应该在创建新的可放置区域时更新插件。该插件应该有一些“更新”或“刷新”方法，您可以使用它来执行此操作。

我正在使用 Jquery UI。我尝试用 JS 刷新，但这不起作用，因为刷新页面时克隆的元素消失了（这是正常的，因为我没有保存任何地方）。

【参考方案1】：

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

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

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

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

【讨论】：

是的，我正在使用 Jquery UI。但是，如果我这样做，我必须再次创建 div 之间的连接，因为类已经改变。

很遗憾没有，现在它在原版中也无法使用。

我现在正在使用平板电脑，只要我把手放在电脑上，我就会发布代码。

好吧，我的系统非常复杂，我无法在 jsfiddle 上正确实现。但我做了一个这样的简单例子：jsfiddle.net/ang5v3es/4

【参考方案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();
            
        );
    ;
);

【讨论】：

我不太明白在正常功能中我应该把它放在哪里？在“接受”之后？

首先，您应该展示到目前为止所做的工作，而不是仅仅问一个简单的问题。但据我所知，您应该在创建新元素时使用它。当你第一次初始化插件时，只有已经存在的元素会受到影响，所以如果你想让新的元素具有这种行为，你必须在创建它们时启用它们。

我现在在电脑上，我会在几分钟后尝试显示。但是，顺便说一句，这不起作用

好吧，我的系统非常复杂，我无法在 jsfiddle 上正确实现。但我做了一个这样的简单例子：jsfiddle.net/ang5v3es/2