jquery-ui - 使用 jQuery UI 在空可排序中显示占位符文本

Question

是否有一种正确的非黑客方法在空可排序中添加占位符文本？我并不是指当您将项目拖动到排序标签上时显示的占位符空白。我的意思是像“将项目放到此处”这样的文本。仅当列表为空时才显示。

我尝试显示自己的占位符元素，但无法正确更新它的可见性，因为当我将连接的可拖动对象拖入可排序对象时，jQuery UI 不会向我发送任何 over 或 out 事件。

编辑:示例代码:http://jsfiddle.net/RRnD8/

由于某种原因，在此示例代码中会触发 over 事件。 out 仍然没有。但在实际代码中，我可以使用 change 而不是 over。

编辑 2:嗯，out 事件被触发。但它是在拖动的元素从可排序中删除之前触发的。我通过以下方式解决了这个问题:

e.sortable({out: function () {
    setTimeout(realOutHandler.bind(this), 0);
}});

有没有更干净的方法来做到这一点？

Answer 1

使用 over 事件隐藏占位符文本，使用 out 事件显示它，使用 stop 方法删除它。

$("#sortable").sortable({
    revert: true,
    over: function() {
        $('.placeholder').hide();
    },
    out: function() {
        $('.placeholder').show();
    },
    stop: function() {
        $('.placeholder').remove();
    }
});
$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});

实例 - http://jsfiddle.net/JfGxy/2/