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

Question

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

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

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

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

$('.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
        }
    }
});

...我认为必须有比这更好的方法。有人解决了吗？

EDIT：感谢@Twisty提供了解决方案。对我来说，我只需要在创建可放置对象时指定accept选项：

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

Answer 1

使用适当的选择器将确保两者可以在不受干扰的情况下工作。

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

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

我可以在一个行上放置行，而对另一个行进行排序。