📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials jQuery in Practice Drag and Drop

Drag and Drop

5 min read
jQuery UI draggable() makes elements movable with the mouse. droppable() creates drop zones that react when a draggable is released inside them. Use the drop callback to perform the resulting action.

Drag & Drop with jQuery UI

// Requires jQuery UI
$('#draggable').draggable();
$('#droppable').droppable({
  drop: function(event, ui) {
    $(this).addClass('dropped');
    console.log('Dropped!', ui.draggable);
  }
});