Skip to content
jQuery UI

Draggable

Make elements draggable with axis, containment, and event callbacks.

#draggable#interaction#ui

Code

jquery-ui
$("#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");