是否有适当的非hacky方法在空的sortable中添加占位符文本?我并不是指将项目拖到sortabel上时显示的占位符空格。我的意思是像“删除项目”这样的文字。仅在列表为空时显示。
我尝试显示自己的占位符元素,但是我无法正确更新它的可见性,因为当我将连接的可拖动拖动到可排序时,jQuery UI不会向我发送任何过度或结束事件。
编辑:示例代码:http://jsfiddle.net/RRnD8/
由于某些原因,在此示例代码中,over
事件被触发。 out
仍然没有。但在实际代码中,我可以使用change
代替over
。
编辑2:嗯,out
事件被触发。但是在从可排序的元素中删除拖动的元素之前触发它。我通过以下方法解决了这个问题:
e.sortable({out: function () {
setTimeout(realOutHandler.bind(this), 0);
}});
有更简洁的方法吗?
答案 0 :(得分:9)
使用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/
答案 1 :(得分:0)
SASS方式:
#sortable
&:empty {
padding: 0;
min-height: 50px;
z-index: 999;
margin-bottom: 10px;
margin-right: 25px;
border: 4px dashed #CCC;
background-color: #F5F5F5;
&:after {
color: #888;
content: "Drop items here";
display: block;
min-height: inherit;
line-height: 50px;
text-align: center;
font-size: 18px;
font-weight: 700;
}
}