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