jQuery – Drop

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.

 

Other post in jQuery

Related Post

3 Responses to “jQuery – Drop”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear