jQuery UI可排序-如果容器为空，如何在容器中添加文本

Question

我正在使用可排序的JQuery UI。我有两个ID为sortable1和sortable2的列表，现在我可以毫无问题地将项目从＃sortable1拖到＃sortable2了。我想知道是否可以在无序列表中显示消息，如果列表中没有项目，

例如。请在这里拖动项目

这就是我的代码的样子。

jQuery('#sortable1, #sortable2').sortable({'connectWith':'.connectedSortable','dropOnEmpty':true,'scroll':true});

Answer 1

这是完全可能的，这是一个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();
                 }            
             }

        });