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

Question

如果我有一个 jQuery Draggable 对象

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

和一个连接的可排序

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

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

Sortable itself 有一个选项 dropOnEmpty，当设置为 false 时，它​​会阻止您将 that 可排序的东西放到空的可排序对象上；但是 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 行为？

TIA 铝

Answer 1

你能在receive 事件中检查可排序对象是否为空吗？比如：

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