jQuery UI Draggable
jQuery UI Draggable is a component of the jQuery UI library that allows you to make HTML elements draggable within a web page. It enables users to interact with and move elements around the page using mouse or touch interactions. Draggable elements can be useful for creating interactive user interfaces, such as draggable cards, panels, or widgets.
Including jQuery UI
Before you can use jQuery UI Draggable, you need to include both jQuery and jQuery UI libraries in your HTML file. You can do this by adding the following script tags to your HTML:
Creating Draggable Elements
To make an HTML element draggable, you need to apply the .draggable() method to it. Here's an example:
In this example, the #draggable-element is made draggable, and users can click and drag it around the page.
Options and Configuration
jQuery UI Draggable provides various options and configuration settings to customize its behavior. For example, you can specify a containment area to limit where the element can be dragged:
You can also bind event handlers to Draggable elements to respond to various interactions. For example, you can use the start, drag, and stop events:
These events allow you to perform actions when dragging starts, is in progress, or stops.
Examples of Use Cases
- Resizable Elements: Combine Draggable with jQuery UI Resizable to create elements that can be both dragged and resized.
- Sortable Lists: Create sortable lists where users can reorder items by dragging them.
- Interactive Widgets: Design interactive widgets, such as draggable pop-up windows or panels.
Here's a more comprehensive example that combines draggable and resizable functionality:
Full Source : jQuery
This example creates an element that is both draggable and resizable within its parent container.
jQuery UI Draggable simplifies the process of adding drag-and-drop functionality to your web applications, making it easier to create interactive and user-friendly interfaces.