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

  • jQuery – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if you want to...
  • jQuery Looks like XPathjQuery Looks like XPath So far in our examination of jQuery we've seen how to select an ID, select a set of elements by tag name and select a set of elements by their class.  But what if we wanted to select a set of elem...
  • jQuery TabsjQuery Tabs While the TabControl provided by Microsoft in the AJAX toolkit is probably a bit easier to use, the Tabs in jQuery are not much harder to implement and give us a bit more flexibility. Here are th...
  • jQuery ProgressbarjQuery Progressbar Once you venture into the land of AJAX you’ll soon discover the need to let your user know that some work is taking place in the background.  If you can, you’ll want to let them know just how...
  • jQuery – class manipulationjQuery – class manipulation So, now that we've fully exhausted the topic of how to select elements using jQuery, what can we do with it? Well, one thing we can do is use the two built-in methods, addClass and removeClass, ...
  • Pingback: Dew Drop - February 12, 2009 | Alvin Ashcraft's Morning Dew

  • George

    What about processing all the items after a drops have been made? Like a shopping cart type deal.

  • Dave

    Just off the top of my head, I’d say you’d want to use a web service and json to send the product the server as you drop them.