Display placeholder text in empty sortable with jQuery UI

Question

Is there a proper non-hacky way to add a placeholder text in an empty sortable? I don't mean the placeholder white-space that gets displayed when you drag an item over the sortabel. I mean a text like "Drop items here." that is only displayed when the list is empty.

I tried to display my own placeholder element, but I fail to properly update it's visibility, because jQuery UI does not send me any over or out events when I drag a connected draggable into the sortable.

Edit: Example code: http://jsfiddle.net/RRnD8/

For some reason in this example code the over event is fired. out is still not. But in the real code I can use change instead of over.

Edit 2: Hmm, the out event is triggered. But it is triggered before the dragged element is removed from the sortable. I fixed this via:

e.sortable({out: function () {
    setTimeout(realOutHandler.bind(this), 0);
}});

Is there a cleaner way to do this?

Answer 1

Use the over event to hide the placeholder text, the out event to show it, and the stop method to remove it.

$("#sortable").sortable({
    revert: true,
    over: function() {
        $('.placeholder').hide();
    },
    out: function() {
        $('.placeholder').show();
    },
    stop: function() {
        $('.placeholder').remove();
    }
});
$("#draggable").draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid"
});

Live Example - http://jsfiddle.net/JfGxy/2/