Home » jQuery » jQuery – Drop

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

Like this Article? Subscribe to get every article sent to your email.

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 […]
  • 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 […]
  • 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. […]
  • 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 […]
  • 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 […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.

One Pingback/Trackback

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