使用jQuery UI在空白排序中显示占位符文本

Question

是否有一种适当的非hacky方式在空的可排序中添加占位符文本？我并不是指将项目拖到sortabel上时显示的占位符空格.我的意思是像"删除项目"这样的文字.仅在列表为空时显示.

我试图显示我自己的占位符元素,但是我无法正确更新它的可见性,因为当我将连接的可拖动拖动到可排序时,jQuery UI不会向我发送任何过度或结束事件.

编辑:示例代码: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/