jQuery UI - Interaction | Scaler Topics

Overview

At a high level, the jQuery user interface was a collection of plugins and utilities that rely on jQuery. But if you dig deeper, you'll find a set of coherent and well-documented thematic building blocks that help you create anything from small websites to highly complex web applications.

Unlike jQuery plugins, the plugins and utilities in the jQuery user interface are supported by the jQuery Foundation. You can count on them to be officially supported and maintained for the entire duration of your application.

The stability and ease of use of the jQuery user interface have led to continued growth in the library's popularity. The library is now used on the web in 19% of the top 10,000 sites and is included in the WordPress core and Drupal.

Interactions are jQuery plugins that allow users to interact with DOM elements. Users can slide objects across the screen with the draggable interaction. They can also sort items in a list with the sortable interaction.

Introduction to JQuery Interaction

A jQuery interaction is a widget that allows page visitors to edit, modify, or otherwise tamper with a web page element using a mouse, trackpad or touchscreen.

Basic mouse-based interactions could be added to any element. We may use interactions to construct sortable lists, resizeable items, and drag-and-drop behaviours. Interactions are also useful building blocks for more complicated widgets and applications.

Applying a jQuery Interaction

Let’s look at the generic syntax for applying an interaction to an element before diving deep into the possible interactions.

Syntax:

selector: It is a jQuery selector that specifies the web page element you wish to work with.
interaction: It is a string that represents the name of the jQuery UI interaction to be applied to the element.
options|events: It is an object literal containing one or more property-value pairs. They specify the interaction choices to be used and one or more interaction events to be handled. The accessible options and events change depending on the interaction.

The example code snippet below applies the resizable widget of jQuery UI with two options that determine the element's minimum width and minimum height.

It also includes a handler for the resize event of the widget. It gets fired when the element gets resized.

The event argument in the event handler refers to the event itself, whereas the UI argument refers to the user interface object with which the website visitor interacts. Most interaction widgets have both start and stop events. These events fire when the interaction begins and finishes, respectively.

Trying Out JQuery Interactions

Let's have a quick rundown of the interactions provided by jQuery UI.

JQuery UI Draggable

To make any DOM element draggable, use the jQuery UI draggable() function. Once the element has been made draggable, you can move it by clicking and dragging it anywhere within the viewport.

Syntax:

We can use the draggable() method in two ways:

$(selector, context).draggable(options) Method
$(selector, context).draggable("action", params) Method

Example:

jQuery UI Droppable

The droppable() method in jQuery UI allows you to make any DOM element droppable at a given target.

Syntax:

We can use the droppable() method in two ways:

$(selector, context).droppable(options) Method
$(selector, context).droppable("action", params) Method

Example:

jQuery UI Resizable

The resizable() method of jQuery UI is used to resize any DOM element. It facilitates the resizing of items, saving time and requiring less coding.

The resizable() method displays a resize icon in the bottom right corner of the object.

Syntax:

We can use the resizable() method in two ways:

$(selector, context).resizable(options) Method
$(selector, context).resizable("action", params) Method

Example:

jQuery UI Selectable

The selectable() function of jQuery UI is used to pick DOM elements individually or in groups. Using this method, you can choose an element by dragging a box with your cursor over it. You can also use the CTRL key to select several elements.

Syntax:

We can use the selectable() method in two ways:

$(selector, context).selectable(options) Method
$(selector, context).selectable("action", params) Method

Example:

JQuery UI Sortable

Using the mouse, the jQueryUI sortable() method is used to re-order components in a list or grid layout. This method's sorting capabilities are based on an operation string given as the first parameter.

Syntax:

We can use the sortable() method in two flavours:

$(selector, context).sortable(options) Method
$(selector, context).sortable("action", params) Method

Example:

Conclusion

In this article, we’ve seen how jQuery Interactions work, applying methods, and a gist of how it is applied to different functions throughout the code in detail.
Do try it on your own to understand the jQuery interaction concepts with more clarity.