Droppable is the standard droppable units handling class from the drag-and-drop library.

The public API consists of only two methods: constructor and destructor. The constructor receives a reference to an element and the options hash while the destructor is just a method which detaches all the events handling from the element thus rendering it not droppable anymore.

// Make 'my-element' droppable ...
var droppable = new Droppable('my-element', {accept: 'div'});

// ... and remove the dropping ability again

You can also use the auto-initialization feature and the Element level shortcuts to create droppables. See the main drag-and-drop page for more details.


top ↑Options List

There are a number of options you can specify for your droppables:

accept’*’CSS rule to filter out acceptable elements
containmentnulllist of elements (or ids) that should be accepted
overlapnullx/y/horizontal/vertical/both draggable - droppable overlapping condition
overlapSize0.5the overlapping level, 0 for nothing 1 for the whole thing
allowClass‘droppable-allow’CSS class for elements that should accept draggables
denyClass‘droppable-deny’CSS class for elements that shouldn’t accept a draggables
relName‘droppable’automatically initialized items feature key

As usual you can specify them as initialization options for every particular droppable unit or customize the Draggable.Options in order to change the global settings.

top ↑Events List

There are a few events to notify your application about droppables:

hoverwhen a draggable is hovered over the droppable
leavewhen a draggable leaves the droppable
dropwhen a draggable was accepted and dropped

All these event listeners receive three arguments: the draggable object, the droppable object and the mouse event that caused the event.

new Droppable('my-element', {
onDrop: function(draggable, droppable, event) {