.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.

Other Related Items:

Beginner's JavaScript 2004 on DVDBeginner's JavaScript Programming 2004 teaches the basics of programming using JavaScript. JavaScript, a modern programming language, can be written ... Read More >

Elle Macpherson Intimates Maternelle No-wire drop cup braCotton lined, lace-trimmed cups for full coverage and comfort for nursing mothers. Stretch top line and 6 column, 2 row hook, eye back closure ensure bra expands and contracts with bust, crop top style ensures comfort of breast tissue. Adj. back straps.

Tootsie Pop Drops 24ct.Tootsie Pops without the stick! Flavors include chocolate, cherry, blue raspberry, orange and grape. 24-2.25oz bags. Net wt. 54oz.

Related Post

• jQuery 1.4 Released
• Do you Need My Help?
• jQuery Expand/Collapse Using Head Tags
• Does jQuery Make Us Lazy?
• jQuery – Dialog

Bookmark to:

Hide Sites

3 Responses to “jQuery – Drop”