jQuery UI - Interaction
FREE
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.
Transform Your Career
Choose from our industry-leading programs designed for career success
Modern Software and AI Engineering Program
Master full-stack development with AI integration
+1000 moreModern Data Science and ML with specialisation in AI
Advanced data science techniques with AI specialization
+1000 moreAdvanced AIML with Specialisation in Agentic AI
Deep dive into AIML with focus on Agentic systems
+1000 moreDevOps, Cloud & AI Platform Engineering
Build and manage AI-powered cloud infrastructure
+1000 moreAI Engineering Advanced Certification by IIT-Roorkee
Premier AI engineering certification from IIT-Roorkee
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:
Turn Learning into Career Growth
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:
Scaler Placement Report and Statistics
Scaler learners achieved 2.5x salary growth with average post-Scaler CTC reaching ₹23L.
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.
Google
Amazon
Microsoft
Flipkart
Adobe1200+ more