可放置区域中的 jQuery 可放置区域

Posted 2023-05-08

【中文标题】可放置区域中的 jQuery 可放置区域

【英文标题】：jQuery droppable zone in droppable zone

【发布时间】：2015-09-07 23:18:36

【问题描述】：

我有一个名为 <ul class="droppable"> 的可删除无序列表。在无序列表中，我动态生成了名为<li class="placeholder"></li> 的列表项，它们也是可放置的。

在占位符之间放置可拖动项目时，一切正常。但是当在<li class="placeholder"></li> 本身上放置一个可拖动项时，可拖动项会附加到占位符和无序列表中。

所以我得到了它的双重克隆。

Here's a jsfiddle 有一个直观的例子。我知道在我的页面上获得双重克隆是合乎逻辑的，但我不知道如何禁用它......

非常感谢任何帮助！

更新：如果您将可拖动项目垂直拖动到可放置元素上，它们会自动附加吗？这怎么可能？

【问题讨论】：

已经在这里回答droppable in droppable。使用贪心选项。

它必须同时接受。它应该对保留的占位符进行排序和附加，但是当悬停占位符时，它应该附加到占位符本身。

响应您的更新，注释掉您的//sorting(); 函数，您将看到它们不再自动附加。组合排序和删除功能时会发生的事情。

感谢您的回复。事实上，它与 sortable 中的 receive 事件和 droppable 中的 drop 事件有关。当一个人一起使用它们时，这是一个错误。 ***.com/questions/18664641/…

【参考方案1】：

您可以尝试解决此问题的一种方法是将您的所有行为移至您的sortable 并使用droppable 仅进行切换以确定您需要的行为。这样，您可以在一个地方处理所有事情，这应该可以解决在同一元素上同时使用 sortable 和 droppable 的一些不良影响。像这样：

在您的 droppable 中，您将开关设置为 over 和 out，并设置您需要的对象。

 $("li.placeholder").droppable(

                accept: "li.to-drag",
                hoverClass: "correct",
                activeClass: "active",
                revert: false,
                tolerance: "pointer",
                over: function (e, ui) 
                   curDrag = ui.draggable;
                   curTarget = e.target;
                                        curThis = $(this);
                    overSortable = true;
                ,
                out: function (e, ui) 
                    overSortable = false;
                ,

                drop: function (event, ui) 

                

            );

然后，在sortable 的beforeStop 事件中，检查变量overSortable 是否为真并在那里设置行为。所有引用 ui.draggable、this 和 event.target 的内容都需要替换为您在 droppable 中设置的对象。更好的事件方法是创建一个处理所有这些行为的函数并将它们作为参数传递。

beforeStop: function (e, ui) 
                if (overSortable) 
                   curDrag.addClass('placeholder');
                   var dragging = curDrag.find("img").remove();

                   curThis.append(dragging).addClass("dropped");
                   curThis.droppable('disable');

                    var day = curDrag.attr('data-id');
                    var index = $(curTarget).index();

                    //...

                 else 
                    ui.item.addClass('placeholder')
                

仍有一些调整要做，尚不完全清楚应该发生什么以及何时发生，但这可以使工作变得更容易，而不是尝试管理在您删除一个元素时触发的多个事件，您只管理一个。

http://jsfiddle.net/ts290vth/4/

【参考方案2】：

设法让它为你工作：

function dropping () 

        $("li.placeholder").droppable(

            accept: "li.to-drag",
            hoverClass: "correct",
            activeClass: "active",
            revert: false,
            tolerance: "pointer",

            drop: function (event, ui) 

                var dragging = ui.draggable.find("img");

                $(this).append(dragging).addClass("dropped");
                $(this).droppable('disable');

                var day = $(ui.draggable).attr('data-id');
                var index = $(event.target).index();

                $(this).attr("data-id", day);
                $(this).attr("date-order", index);
                $(this).addClass("drop-"+ index);
                $(this).attr("data-content", "");

注意：var dragging = ui.draggable.find("img"); 这一行会让您在拖放时复制副本，因此您只需删除clone();。

它在 dest 创建了您拖动项目的克隆。

现在请注意：

$("#dropzone").droppable(

        accept: "li.to-drag",
        revert: false,
        tolerance: "pointer",

        drop: function (event, ui) 

            $(this).append(dragging);
            //$("li.to-drag").addClass("placeholder");
            $(this).droppable('disable');

        

    );

占位符类的某些东西给您带来了麻烦。

希望这会有所帮助。

【讨论】：

你能做一个jsfiddle，展示你的结果吗？仍然不适合我。让我发疯..

谢谢，但是，当我垂直悬停可拖动时，它会被附加。悬停后我的to-drag 变空并被添加到列表中。