message in empty <div> to drag

I am working on drag and drop tool 开发者_如何学运维using jQuery UI's sortable widget.

I'd like to add a message into an empty div where something can be dragged into, like: "drag here". I'd like to remove this message as soon as something is in that div. There will be times when the page loads with something already in that div, so it can't be only on action, but onload needs to check it too.

How do I go about it?

Here's my code:

$("#divFrom, #divTo").sortable({
    connectWith: '.connectedSortable'   
}).disableSelection();

You should be able to set up a draggable, and droppable and tap into droppable's drop event handler, which is fired when an item is dropped:

$("#target").droppable({
    drop: function() {
        // Empty the droppable div:
        $(".message").remove();
    }
});

Demo here: http://jsfiddle.net/andrewwhitaker/rUgJF/2/

As for doing something similar on load, if you provided your markup it would make providing a solution a little easier (is there a specific element inside the droppable div that you could check for?)

Hope that helps.