Draggable

Code

$("#box").draggable({
  axis: "x",
  containment: "parent",
  cursor: "move",
  grid: [10, 10],
  start: function(event, ui) {
    console.log("Started dragging", ui.position);
  },
  drag: function(event, ui) {
    console.log("Dragging", ui.position);
  },
  stop: function(event, ui) {
    console.log("Stopped at", ui.position);
  }
});

// Disable / enable
$("#box").draggable("disable");
$("#box").draggable("enable");

// Destroy
$("#box").draggable("destroy");

Explanation

Turns any DOM element into a draggable widget with options for axis locking, containment, snapping grid, and cursor feedback. The start/drag/stop callbacks receive a ui object containing the helper element and current position. Use the string API ('disable', 'enable', 'destroy') to control the widget lifecycle.

More jQuery UI Snippets