jQuery Drag and Drop
by Vincy. Last modified on July 12th, 2022.
In this tutorial, we are going to see an example code for jQuery drag and drop. In this example, we need the jQuery UI library to use drag and drop functions.
We are using a draggable() function to move a draggable element. This function is called with the reference of the selector string denoting the HTML element to be dragged and dropped.
Draggable UI Element
This is the image element to be dragged by using jQuery. We are referring to this image by an id. This id selector is used in jQuery to call the draggable() function.
<img src="smile.jpg" id="drag_smile">
jQuery draggable() Function
We are calling the draggable() function with respect to the id of the image element. Using this single-line script we can drag and drop the element anywhere in the window.
$("#drag_smile").draggable();
If we want to limit the drag area, then we have to use this code.
$(function() {
$("#drag_smile").draggable({
containment: "parent"
});
});
There are more options, methods, and events to control jQuery drag and drop. The drag and drop options can be set as the arguments of draggable().
For example, we are setting the cursor property to the drag event. These two methods can be used while setting drag properties.
Setting a property on initializing draggable.
$("#drag_smile").draggable({ cursor: "hand" });
Setting property after initialization.
$("#drag_smile").draggable();
$("#drag_smile").draggable("option", "cursor", "hand");
More Options
- axis – To set the dragging direction (vertical or horizontal).
- delay – time taken (in milliseconds) to start dragging from pressing the mouse.
- helper – To allow to create the copy of the drag element if needed.
- revert – To restore the drag element to its original position (possible Values true, valid).
- revertDuration – The time to revert element position.
- scroll – To contain scrollable drag-area.
And there are much more options in this widget, which makes drag and drop quite interesting.
Functions
- enable() – To enable drag.
- disable() – To disable drag.
- destroy() – To clear drag.
- options() – To set drag properties.
Events
- Create – on create.
- Start – on start dragging the element after mouse down.
- Drag – during the drag.
- Stop – releasing the mouse from dragging.
Hi, I’m Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I’m currently available for freelance work.