jQuery UI Droppable

jQuery UI's .droppable() interaction turns an element into a valid drop target for .draggable() elements. Together they give you drag-and-drop features like "drag items into a shopping cart" or "drag a card into a bin" without writing any low-level mouse-tracking code yourself.

1) Basic drag source + drop target


$('#source').draggable();

$('#target').droppable({
  drop: function(event, ui){
    // ui.draggable is a jQuery object - the element that was dropped
    $(this).text('Dropped: ' + ui.draggable.text());
  }
});
Try it Yourself »

2) Restrict what can be dropped: accept


$('#cart').droppable({
  accept: '.fruit', // only draggables with class "fruit" are accepted
  drop: function(event, ui){ ... }
});
Try it Yourself »

3) Overlap detection: tolerance


$('#target').droppable({
  tolerance: 'pointer' // 'fit' | 'intersect' (default) | 'pointer' | 'touch'
});
Try it Yourself »
ToleranceMeaning
fitDraggable must be fully inside the droppable to accept.
intersectDefault - at least 50% of the draggable overlaps the droppable.
pointerThe mouse pointer must be over the droppable.
touchAny part of the draggable touches the droppable.

4) Highlighting while hovering: over / out


$('#target').droppable({
  over: function(){ $(this).addClass('ui-state-highlight'); },
  out: function(){ $(this).removeClass('ui-state-highlight'); }
});
Try it Yourself »

Live Demo

Drag the green box into the dashed drop zone. The zone highlights while you hover over it, then turns solid and confirms the drop.

Drag me
Drop here
Note: This is jQuery UI's cross-browser abstraction over drag-and-drop. It's a different mechanism from the native HTML5 Drag and Drop API (draggable="true", dragstart/dragover/drop events) covered earlier in the HTML tutorial - jQuery UI's version works with plain mouse/touch events instead, so it behaves consistently across older browsers too.