.NET Answers

Last week we took a look at how to make an element draggable.  This isn’t of much use unless we can drop it.

Fortunately, making an item droppable is about as easy as making it draggable.

$("#dropMe").droppable();

Of course, that’s the minimum code you need.  You will want to know when an item has been dropped on the droppable element.  For that, you’ll need to specify the “drop” event handler.

$("#dropMe").droppable({
    drop: function(ev, ui) {
        alert('dropped');
    }
});

Notice the first parameter is a pointer to the event and the second parameter allows you to access the element that was dragged via ui.draggable.

As with draggable, there are several other parameters that you can use to customize the look of the droppable item(s) by specifying the class that should be added when the drag starts (activeClass) or when the item is over the droppable element (hoverClass).

The one thing you’ll want to watch out for is the fact that jQuery UI version 1.5.3 only works with jQuery 1.2.6.  So, if you are working with jQuery 1.3.x, you’ll want to grab the latest RC version of jQuery UI.  Otherwise, none of this will work correctly for you.