在可放置容器内防止 jQueryUI 可排序触发可放置事件
Prevent jQueryUI sortable triggering droppable events when inside a droppable container
我有一个可放置的容器,其中还包含可排序的元素。这两个组件不相关,但可排序容器必须位于可放置容器内,设计才能正常工作。
我的问题是,当我重新排列可排序元素时,它会触发与将可拖动元素拖到其上时相同的可放置事件。
这个 jsFiddle 演示了这个问题:http://jsfiddle.net/48tmyLeb/2/
到目前为止,我找到的唯一解决方案是在 droppable 事件中执行检查以确保放置的元素是可拖动类型。然而,这并不理想,因为 sortable 仍然会触发不透明度变化。
$('.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-container:not(.sortable-container)').droppable({
工作示例:http://jsfiddle.net/Twisty/z23nwhbf/
我可以在一个上删除行,但仍然对另一个进行排序。
我有一个可放置的容器,其中还包含可排序的元素。这两个组件不相关,但可排序容器必须位于可放置容器内,设计才能正常工作。
我的问题是,当我重新排列可排序元素时,它会触发与将可拖动元素拖到其上时相同的可放置事件。
这个 jsFiddle 演示了这个问题:http://jsfiddle.net/48tmyLeb/2/
到目前为止,我找到的唯一解决方案是在 droppable 事件中执行检查以确保放置的元素是可拖动类型。然而,这并不理想,因为 sortable 仍然会触发不透明度变化。
$('.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-container:not(.sortable-container)').droppable({
工作示例:http://jsfiddle.net/Twisty/z23nwhbf/
我可以在一个上删除行,但仍然对另一个进行排序。