jQuery UI Draggable

jQuery UI Draggable is a highly customizable plugin for providing drag and drop functionality to your web application. It is built on top of the jQuery library, which makes it easy to use and integrate with other jQuery UI components.

Usage

To use the Draggable plugin, you need to include the jQuery and jQuery UI libraries in your web page. You can download them from their respective websites or use a CDN.

After including the libraries, you can use the .draggable() method to make an element draggable. Here is an example:

$("#myElement").draggable();

This will make the element with the ID "myElement" draggable.

Options

You can also pass options to the .draggable() method to customize its behavior. Here are some of the most commonly used options:

• axis: Restricts dragging to either the horizontal ("x") or vertical ("y") axis.
• containment: Constrains dragging to within the bounds of a specified element or the viewport.
• cursor: Sets the cursor type that appears when dragging.
• handle: Specifies a handle element that should be used for dragging.
• helper: Specifies a helper element that should be used during dragging.
• opacity: Sets the opacity of the dragged element.
• revert: Specifies whether the dragged element should animate back to its original position when released.
• snap: Specifies how far the dragged element should snap to other elements.

Here is an example that uses some of these options:

$("#myElement").draggable({
  axis: "y",
  containment: "parent",
  cursor: "move",
  handle: ".drag-handle",
  helper: "clone",
  opacity: 0.5,
  revert: true,
  snap: true
});

Events

The Draggable plugin also provides a number of events that you can use to respond to drag and drop actions. Here are some of the most commonly used events:

• drag: Triggered while the element is being dragged.
• start: Triggered when dragging starts.
• stop: Triggered when dragging stops.
• create: Triggered when the draggable is first initialized.

You can use these events to perform custom actions during dragging. Here is an example:

$("#myElement").draggable({
  start: function(event, ui) {
    console.log("Dragging started.");
  },
  stop: function(event, ui) {
    console.log("Dragging stopped.");
  }
});

Conclusion

jQuery UI Draggable is a powerful plugin that provides drag and drop functionality to your web application. Its customizable options and events make it easy to integrate with other jQuery UI components and create a seamless user experience.

To learn more about jQuery UI Draggable, check out the documentation.