Skip to main content

jQuery UI Interactions

jQuery UI Interactions are a set of plugins that provide new user interface interaction methods. These interactions include drag and drop, resize, select and sort functionalities. These interactions are designed to be used with HTML elements, and they can be easily integrated into any web application.

What are jQuery UI Interactions?​

jQuery UI Interactions are pre-built functions that you can use to enhance the user experience on your web application. These interactions include:

  • Draggable: This interaction allows elements to be moved by clicking and dragging.
  • Droppable: This interaction allows elements to accept draggable elements.
  • Resizable: This interaction allows elements to be resizable with the mouse.
  • Selectable: This interaction allows user to select elements by dragging a box (known as a lasso) with the mouse.
  • Sortable: This interaction allows reordering of elements with drag and drop.

How to Use jQuery UI Interactions?​

Before you can use the jQuery UI Interactions, you must first include the jQuery and jQuery UI libraries in your HTML document.

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

Draggable Interaction​

To make an HTML element draggable, you simply select the element with jQuery and call the draggable() function.

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

Droppable Interaction​

To make an HTML element droppable, you simply select the element with jQuery and call the droppable() function. In addition, you can specify a function to run when a draggable element is dropped.

$( "#droppable" ).droppable({
  drop: function() {
    alert( "Dropped!" );
  }
});

Resizable Interaction​

To make an HTML element resizable, you simply select the element with jQuery and call the resizable() function.

$( "#resizable" ).resizable();

Selectable Interaction​

To make an HTML element selectable, you simply select the element with jQuery and call the selectable() function.

$( "#selectable" ).selectable();

Sortable Interaction​

To make an HTML element sortable, you simply select the element with jQuery and call the sortable() function.

$( "#sortable" ).sortable();

Conclusion​

jQuery UI Interactions provide a powerful way to enhance the user interface of your web applications. By using these interactions, you can provide a more interactive and user-friendly experience for your users. Remember, always make sure to test your interactions thoroughly to ensure they work as expected on all devices and browsers.