JQuery UI sortable - How to add text in a container if it's empty

I'm using the JQuery UI sortable. I have two list with id sortable1 and sortable2, now I'm able to drag items from #sortable1 to #sortable2 with no problems. I was wondering if it's possible to disp开发者_Go百科lay a message within a unordered list, if no items are within the list,

eg. Please drag items here

This is how my code looks.

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

This is completely possible, here's a jsFiddle that demonstrates that:

http://www.jsfiddle.net/8TCxY/

I used two unordered lists with a special "emptyMessage" li to specify your message, then defined the sortable items by those without.

Here's relevant section of JS code:

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();
                 }            
             }

        });

Here you go:

$(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();
});

Example Link

Here is a solution inspired by the first two posts. It uses an li element with style "empty" to hold the empty message. It provides two enhancements over the other solutions: the empty message is shown on creation if the list is empty, and the empty message is hidden as soon as an element is dragged over the receiver.

$('#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();
    }
  }
})