jQuery Draggable 仍然可以拖放到空 - 我该如何阻止它？

Question

如果我有一个 jQuery Draggable 对象

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

和一个连接的可排序对象，

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

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

Sortable 本身有一个选项 dropOnEmpty，当设置为 false 时，可以防止您将可排序的内容删除到空的可排序中；但 Draggable 没有这样的选项。

我尝试了这个：

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

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

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

TIA 铝

Answer 1

你能在receive事件中检查sortable是否为空吗？像这样的东西：

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