jQuery UI 可排序的 dropOnEmpty 选项

jQuery UI 是一个非常流行的 JavaScript 库，其中的可排序组件允许用户通过交互来排序列表或表格等元素。dropOnEmpty 是其中的一个选项，用于定义是否允许将排序元素拖放到目标元素为空的位置。

基本用法

dropOnEmpty 选项默认为 true，也就是说，当用户将排序元素拖放到目标元素为空的位置时，程序会自动设置排序元素的位置为目标元素的位置。例如，我们可以通过以下代码创建一个可排序列表：

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

$( "#sortable" ).sortable();

如果我们将 Item 3 拖放到空的位置，它将自动成为新的最后一个元素。但是如果我们将 dropOnEmpty 选项设置为 false，拖放到空的位置时，会发生以下情况：

$( "#sortable" ).sortable({
    dropOnEmpty: false
});

当我们将 Item 3 拖放到空的位置时，它不会成为新的最后一个元素，而是被返回到原位置。

进一步定制

除了在 sortable() 函数中设置 dropOnEmpty 选项以外，我们还可以使用 receiv() 和 beforeStop() 等函数在拖放操作发生时进行更精确的控制。

例如，我们可以使用 receiv() 函数来判断目标元素是否为空，并根据具体情况设置 dropOnEmpty 选项：

$( "#sortable" ).sortable({
    receive: function(event, ui){
        var target = $(this);
        var is_empty = target.find('li').length == 0;
        $(this).sortable("option", "dropOnEmpty", is_empty);
    }
});

在这里，我们通过查找目标元素的子元素数量来判断目标元素是否为空，然后设置 dropOnEmpty 选项。如果目标元素为空，我们将 dropOnEmpty 设置为 true，否则设置为 false。

在 beforeStop() 函数中进行相似的处理也是可行的，其具体做法与 receiv() 函数类似，这里就不再赘述。

总结

dropOnEmpty 是 jQuery UI 中可排序组件的一个选项，用于定义是否允许将排序元素拖放到目标元素为空的位置。我们可以在 sortable() 函数或 receiv()、beforeStop() 等函数中进行 dropOnEmpty 的设置和控制，以满足特定的需求。