JavaScript drag and drop is a difficult task to achieve, and luckily libraries such as jQuery UI help make the task easier. Unfortunately however, all of the drag and drop libraries that I found did not use event delegation. Event delegation is a technique used to make JavaScript libraries perform better by only registering one event handler of each type for the whole document, rather than for each individual element. Besides providing pages with a speed boost, event delegation has the added benefit of working automatically on new elements added to the page. If, for instance, I had created a click handler on all of the DIVs when the page first loaded, and then added another DIV later using JavaScript, that new DIV would automatically respond to click events using the handler I had set up when the page was loaded since you don’t need to register a new event listener. Event delegation is a fairly complex issue, but it is easier than you might think. If you are interested in learning more about event delegation, you should check out this Sitepoint article on the topic.
Recently, I was writing a pretty complex application using jQuery, and I was using jQuery UI to do the drag and drop. I had a fairly small test data set of 30 or 40 items, but when I was just about ready to go live and was testing the app with a larger data set of 500 – 600 items, things started performing very slowly. Every time a user clicked on an item in one list, all of the items in the second list needed to change, and because jQuery UI doesn’t use event delegation, things were taking a long time. It turns out that binding event listeners to 600 list items takes almost 2 seconds on my system, and this was simply not acceptable for the application that I was building.
I searched and searched, and could not find a drag and drop library similar to jQuery UI’s that used event delegation. So, long story short, I decided to write my own. Since I was writing this for a specific application, I only added the features that I was using from jQuery UI, but most of the function and property names are the same. It doesn’t nearly have all of the options that jQuery UI provides, but I can see it getting there in the future, as I need the features. Since writing a cross browser drag and drop library from scratch is not the most fun experience, I am posting this library to the web so that you can use it. If you’d like to add features, take a look at the source (it’s less than 200 lines!) and feel free to do so.
Examples:
This library is designed to be a drag AND drop library, meaning that elements that are dragged need to be dropped somewhere. This means that when you drop an element where it isn’t allowed to drop, the element will just slide back to it’s starting position. This isn’t a library for simply changing the position of elements at this point, but it could be in the future.
To make an element draggable or droppable, you just call the respective method on any jQuery object. For example:
$(".draggable").draggable();
$(".droptarget").droppable();
The options that you can use in the draggable plugin are in the table below.
| Name | Description | Default |
|---|---|---|
draggingClass |
The class that will be applied to helper elements while dragging |
dragging |
helper |
A function that returns an element to be used as the dragging helper (the element shown to the user while dragging). A function is passed into the helper option allowing you to set an option temporarily (just for the current drag). | Clone draggable |
distance |
The distance the user needs to drag from the draggable element before the helper element becomes visible. Useful for elements that can be both clicked and dragged as this prevents drag operations until the user really wants to drag. |
0 |
cursorAt |
The position at which the mouse cursor will always appear during a drag. Useful for helpers with a dramatically different size than the draggable element. Pass in an object with optional properties top and left which are positions of the cursor relative to the helper element. | Mousedown position |
The options for the droppable plugin are in the table below.
| Name | Description | Default |
|---|---|---|
hoverClass |
The class that will be applied to the drop target when an acceptable droppable is over the target. |
draghovered |
accept |
A jQuery selector that describes the elements that may be dropped on the target | Any element |
drop |
A function to be called when a drop event occurs. An object will be passed into the function with some data about the drop, including: helper: the helper element, draggable: the draggable element, and position: the absolute position of the mouse cursor relative to the page when the drop occurred. | None |
As I stated above, this is a preliminary release, and more options will be added in the future. Here is a test page showing some examples using the options above. As a side note, the time taken to run the code in my app is now just 20ms (down from 2 seconds), since the drag and drop code doesn’t even need to be run!
You can download the jQuery plugin here. Have fun!
