jQuery UI Draggable

jQuery UI's .draggable() interaction turns any element into something a user can pick up and move around the page with the mouse or touch. It's the foundation used by droppable, sortable and many custom drag interfaces.

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

$('#box').draggable({
  axis: 'x' // or 'y' - lock movement to one direction
});

$('#box').draggable({
  containment: '#parent' // also accepts 'window', 'document', or [x1,y1,x2,y2]
});

$('#box').draggable({
  handle: '.handle' // only this child starts the drag
});

$('#box').draggable({
  snap: true,
  snapTolerance: 15 // pixels away before it snaps to nearby elements/edges
});

$('#box').draggable({
  start: function(event, ui){ // fires once, when dragging begins },
  drag: function(event, ui){ // fires repeatedly, ui.position gives {top, left} },
  stop: function(event, ui){ // fires once, when the mouse is released }
});