jquery - 在可放置容器内时防止 jQueryUI 可排序触发可放置事件
问题描述
我有一个可放置的容器,其中还包含可排序的元素。这两个组件是不相关的,但可排序容器必须位于可放置容器内才能使设计工作。
我的问题是,当我重新排列可排序元素时,它会触发与将可拖动元素拖到其上时相同的可放置事件。
这个 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
}
}
});
...我认为一定有比这更好的方法。有没有人解决这个问题?
编辑:感谢@Twisty 提供解决方案。对我来说,我只需要在创建 droppable 时指定接受选项:
$('.droppable-container').droppable({
accept: 'tr',
...
});
解决方案
使用合适的选择器将确保两者可以不受干扰地工作。
$('.droppable-container:not(.sortable-container)').droppable({
工作示例:http: //jsfiddle.net/Twisty/z23nwhbf/
我可以将行放在一个上,然后仍然对另一个进行排序。