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:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Creating Draggable Elements

To make an HTML element draggable, you need to apply the .draggable() method to it. Here's an example:

<div id="draggable-element">Drag me!</div> <script> $(function() { $("#draggable-element").draggable(); }); </script>

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:

$("#draggable-element").draggable({ containment: "parent" // Restrict dragging to the parent container });

Events

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:

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

These events allow you to perform actions when dragging starts, is in progress, or stops.

Examples of Use Cases

  1. Resizable Elements: Combine Draggable with jQuery UI Resizable to create elements that can be both dragged and resized.
  2. Sortable Lists: Create sortable lists where users can reorder items by dragging them.
  3. 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:

run this source code Browser View
Drag and resize me!

Full Source : jQuery

<!DOCTYPE html> <html> <head> <title>Draggable and Resizable Element</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <style> #draggable-resizable-element { width: 200px; height: 150px; border: 2px solid #000; padding: 10px; } </style> </head> <body> <div id="draggable-resizable-element"> Drag and resize me! </div> <script> $(function() { $("#draggable-resizable-element").draggable({ containment: "parent" }).resizable(); }); </script> </body> </html>

This example creates an element that is both draggable and resizable within its parent container.

Conclusion

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.






Related Topics
  1. jQuery UI Datepicker
  2. jQuery UI autocomplete
  3. Jquery UI Tabs
  4. Jquery UI Slider
  1. Jquery UI Dialog
  2. jQuery UI Accordion Plugin
  3. jQuery UI sortable
  4. Jquery UI Tooltip
  5. Jquery UI Menu