jquery - jQuery draggable 仍然可以放在空上 - 我该如何阻止它？

Question

如果我有一个 jQuery Draggable 对象

$('#drag-me').draggable({
  helper: 'clone',
  connectToSortable: '#sortable'
});

和一个连接的可排序

$('#sortable').sortable({
  receive: performMagic
});

我无法阻止这个可拖动的对象放在空的可排序对象上。

Sortable本身有一个选项 dropOnEmpty，当设置为 false 时，它会阻止您将内容从该sortable 拖放到空的 sortable 上；但是 Draggable 没有这样的选项。

我试过这个：

$('#sortable').sortable({
  start: function(e, ui) {
    if (ui.item[0].nodeName == 'IMG') {
       $(this).sortable('cancel')
     }
  }
});

在我的情况下，#drag-me 元素是图像，但 Sortable 元素不是。performMagic 函数成功地将图像转换为可排序包含的 TBODY 元素。但结果不一致；有时它会成功取消操作，但有时它会在其他地方中断。

问题是，我在正确的轨道上吗？这是防止将 Draggable 拖放到空链接的 Sortable 上的唯一方法吗？有没有办法可以劫持现有的 Sortable-to-Sortable 行为？

钛铝

score 0 · Accepted Answer

receive您可以检查事件中的可排序对象是否为空吗？就像是：

$('#sortable').sortable({
  receive: function(event, ui) { 
    if ($('#sortable').children().length > 0) {
        // PerformMagic...
    }
  }
});

1 回答 1