使 jQuery 可放置接受来自使用 connectWith 的可排序的项目

Posted 2023-05-08

【中文标题】使 jQuery 可放置接受来自使用 connectWith 的可排序的项目

【英文标题】：Making a jQuery droppable accept items from a sortable which is using connectWith

【发布时间】：2011-04-29 02:30:53

【问题描述】：

我有一个可排序的列表，它使用connectWith 来确保它只能在它自己的列表类型中进行排序。

现在我正在尝试制作一个可放置的垃圾桶元素，该元素在对项目进行排序时显示在视口的底部。这个元素在列表的上下文之外，只是简单地删除掉在它上面的任何元素。如果您熟悉的话，所需的功能与从 android 手机桌面删除快捷方式相同。

问题是，虽然我的垃圾桶是一个接受“*”的可丢弃物，但我的可排序仅被告知 connectWith 其他“.dropZone”项目，这意味着我无法让我的任何可排序元素导致将鼠标悬停在垃圾元素上。

我已经尝试在start 事件上将每个可排序对象变成可拖动对象，但当然我并没有在确切的时刻拖动那个可拖动对象，因此它没有被激活。是否可以同时满足这两个要求，还是我必须手动检测垃圾桶悬停？

【问题讨论】：

jQuery Sortable and Droppable的可能重复

【参考方案1】：

由于connectWith 接受选择器，您可以为其提供一个选择器，该选择器同时选择其他连接的列表和您的垃圾箱。

$("#sortable1, #sortable2").sortable(
    connectWith: '.connectedSortable, #trash'
).disableSelection();

$("#trash").droppable(
    accept: ".connectedSortable li",
    hoverClass: "ui-state-hover",
    drop: function(ev, ui) 
        ui.draggable.remove();
    
);

示例：http://jsfiddle.net/petersendidit/YDZJs/1/

【讨论】：

我正在使用可拖动、可放置并尝试将它们与可排序组合以排序多个列表并在它们之间拖放。您只需对它们都使用可排序的，而不是可拖放的，它就可以工作。谢谢！

感谢@JohanWikström，出于某种原因，我正在做同样的事情。将其更改为仅使用可排序的排序（咳咳）我:)

sortable 的connectWith 选项只连接可排序的。它不与 droppables 连接。项目simply reverts back to sortable。您的演示 does the same thing 没有 connectWith 选项。

这个解决方案效果很好。请接受作为答案。

【参考方案2】：

将垃圾桶也设为.dropZone 怎么样？然后你会得到一个正确的drop 事件，并且你可以正确处理删除。

将垃圾桶设为可分类可能会有副作用，但我认为它们应该很容易解决。

如果这不符合您的要求，您能否提供一个演示 somewhere，以便我们知道我们必须解决哪些问题才能保持您的结构完整，同时仍然添加您需要的功能？

【讨论】：

它如何变成可排序的（除非系统开发时没有区分“可放置”（另一个 jquery-ui 的东西）和“可排序”。在我看来，答案是创建一个可放置类、可排序类和可拖动类。

我在假设下操作，如 OP 所述，connectWidth 选项存在限制。使垃圾桶可分类本来是一个看似简单的解决方法。然而，由于 PetersenDidIt 的解决方案显然有效，因此没有必要对概念进行肮脏的卑鄙滥用。 ;)