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

Question

如果我有一个jQuery Draggable对象

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

和连接的可排序

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

我无法防止这种拖拽掉落在空的可分类物上。

Sortable 本身有一个选项dropOnEmpty，当设置为false时，会阻止您将 可排序的内容放到空的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行为？

TIA 人

Answer 1

您可以检查receive事件中的sortable是否为空？类似的东西：

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