JQuery UI可排序-如何在容器中添加文本(如果为空)
JQuery UI可排序-如何在容器中添加文本(如果为空)
提问于 2011-01-12 20:08:26
我正在使用JQuery UI可排序。我有两个id sortable1和sortable2的列表，现在我可以将条目从#sortable2 1拖动到#sortable2 2，没有问题。我想知道是否可以在无序列表中显示消息，如果列表中没有项目，
例如：请把物品拖到这里
我的代码就是这样的。
jQuery('#sortable1, #sortable2').sortable({'connectWith':'.connectedSortable','dropOnEmpty':true,'scroll':true});回答 3
Stack Overflow用户
回答已采纳
发布于 2011-01-12 21:36:27
这是完全可能的，这里有一个jsFiddle，它演示了：
http://www.jsfiddle.net/8TCxY/
我使用了两个带有特殊"emptyMessage“li的无序列表来指定您的消息，然后定义了那些不包含的可排序项。
以下是JS代码的相关部分：
jQuery('#sortable1, #sortable2')
.sortable(
{'connectWith':'.connectedSortable',
'dropOnEmpty':true,
'scroll':true,
items: "li:not(.emptyMessage)",
receive: function(event, ui) {
//hide empty message on receiver
$('li.emptyMessage', this).hide();
//show empty message on sender if applicable
if($('li:not(.emptyMessage)', ui.sender).length == 0){
$('li.emptyMessage', ui.sender).show();
} else {
$('li.emptyMessage', ui.sender).hide();
}
}
});Stack Overflow用户
发布于 2011-01-12 21:31:25
给你：
$(function() {
var place1 = $('<li class="empty ui-state-default">Please drag items here</li>');
var place2 = $('<li class="empty ui-state-highlight">Please drag items here</li>');
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
remove: function(event, ui) {
if(!$('li', this).length) {
if(this.id == 'sortable1')
$(this).append(place1);
else
$(this).append(place2);
}
},
receive: function(event, ui) {
$('.empty', this).remove();
}
}).disableSelection();
});示例链接
Stack Overflow用户
发布于 2011-09-23 08:42:45
下面是一个灵感来自前两篇文章的解决方案。它使用风格为“空”的安莉元素来保存空信息。它提供了两个相对于其他解决方案的增强:如果列表是空的，则在创建时显示空消息，并且当一个元素被拖过接收器时，空消息就会被隐藏。
$('#connected1, #connected1').sortable({
connectWith: '.sortable',
items: 'li:not(.empty)',
create: function() {
if ($('li:not(.empty)', this).length === 0) {
return $('li.empty', this).show();
}
},
over: function() {
return $('li.empty', this).hide();
},
receive: function() {
return $('li.empty', this).hide();
},
remove: function() {
if ($('li:not(.empty)', this).length === 0) {
return $('li.empty', this).show();
}
}
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4673500
复制相关文章
相似问题
腾讯云开发者
