在可放置容器内防止 jQueryUI 可排序触发可放置事件

Posted 2023-05-08

【中文标题】在可放置容器内防止 jQueryUI 可排序触发可放置事件

【英文标题】：Prevent jQueryUI sortable triggering droppable events when inside a droppable container

【发布时间】：2020-02-12 09:42:02

【问题描述】：

我有一个可放置的容器，其中还包含可排序的元素。这两个组件不相关，但可排序容器必须位于可放置容器内才能使设计工作。

我的问题是，当我重新排列可排序元素时，它会触发与将可拖动元素拖到其上时相同的可放置事件。

这个 jsFiddle 演示了这个问题：http://jsfiddle.net/48tmyLeb/2/

到目前为止，我找到的唯一解决方案是在可放置事件中执行检查，以确保放置的元素是可拖动类型的。但是，这并不理想，因为可排序仍会触发不透明度更改。

$('.droppable-container').droppable(
    snap: true,
    hoverClass: 'droppable-hover',
    drop: function (event, ui) 
        // Ignore droppable events triggered by sortable
        if (ui.draggable.hasClass('my-sortable-element')) 
            return;
         else 
            // Do something
        
    
);

...我想一定有比这更好的方法。有人解决了吗？

编辑：感谢@Twisty 提供解决方案。对我来说，我只需要在创建 droppable 时指定 accept 选项：

$('.droppable-container').droppable(
   accept: 'tr',
   ...
);

【问题讨论】：

可能会考虑为您的 droppable 使用 accept 选项。

【参考方案1】：

使用合适的选择器将确保两者可以不受干扰地工作。

$('.droppable-container:not(.sortable-container)').droppable(

工作示例：http://jsfiddle.net/Twisty/z23nwhbf/

我可以将行放在一个上，然后仍然对另一个进行排序。

【讨论】：

实际上，只需将“accept: 'tr'” 放入 droppable 的选项中就可以解决我的问题；无需调整选择器。