jquery draggable widget

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss jquery draggable widget

jquery draggable widget allow elements to be moved using the mouse. This widget is in interactions category on the jQuery UI website.

Consider the following HTML

<div id="draggableDiv" class="divClass">
Drag me around
</div>

.divClass {
height: 200px;
width: 200px;
background-color: red;
color: white;
display:table-cell;
vertical-align:middle;
text-align:center;
}

To make the above div element draggable
$('#draggableDiv').draggable();

Some of the useful options to customize the draggable widget
axis - Constrains dragging to either x or y axis

containment - Constrains dragging to within the bounds of the specified element or region

cursor - The CSS style of the cursor during the drag operation

opacity - opacity during the drag operation

revert - Boolean property that specifies if the element should revert to its start position when dragging stops

revertDuration - The duration of the revert animation, in milliseconds

snap - Specifies whether the element being dragged should snap to other elements. Value can be boolean or a selector. When set to true, the element will snap to all other draggable elements. When a selector is specified the element being dragged will snap to the element specified by the selector

snapTolerance - The distance in pixels between the element being dragged and the element to which to snap to, at which snapping should occur.

cancel - Prevents dragging from starting on specified elements

Constrains dragging to x axis
$('#draggableDiv').draggable({
axis : 'x'
});

Constrains dragging to within the bounds of the parent element
HTML
<div id="containerDiv" style="height:300px; width:300px; border:3px solid black">
<div id="draggableDiv" class="divClass">
Drag me around
</div>
</div>

jQuery
$('#draggableDiv').draggable({
containment : 'parent'
});

Changes the cursor style to "move" during the drag operation
$('#draggableDiv').draggable({
cursor: 'move'
});

Changes the opacity to 0.3 during the drag operation
$('#draggableDiv').draggable({
opacity : '0.3'
});

Reverts the div element to its start position when dragging stops. Revert animation completes in 1000 milli-seconds.
$('#draggableDiv').draggable({
revert: true,
revertDuration : 1000
});

The following example
1. Snaps the coloured div elements to the div element with thick black border.
2. The snapping occurs as soon as the distance between any of the coloured div element and the div element with thick black border is 50 pixels
3. The cancel option cancels dragging from starting on the div element with thick black border

HTML

<div id="redDiv" class="divClass" style="background-color: red">
Red Div
</div>

<div id="greeDiv" class="divClass" style="background-color: green">
Green Div
</div>

<div id="blueDiv" class="divClass" style="background-color: blue">
Blue Div
</div>

<div id="brownDiv" class="divClass" style="background-color: brown">
Brown Div
</div>
<br />
<br />
<div id="snapDiv" style="height: 400px; width: 400px; border: 5px solid black">
</div>

Style

.divClass {
height: 200px;
width: 200px;
color: white;
display: table-cell;
vertical-align: middle;
text-align: center;
}

jQuery

$('div').draggable({
snap: '#snapDiv',
snapTolerance: 50,
cancel : '#snapDiv'
});

[RufusVidS]

Good video with one problem: The end part where divs are copied into the box and cannot be dragged after dropping is not due to the cancel option, but rather due to z-index of the elements. if you add a z-index to the smaller, colored div that is greater than the large box div, you will be able to drag them around again after dropping. There is also a stack option in the draggable call, that you can just add stack: ".divClass", and jQuery will automatically ensure the dragged element stays in front of the other elements.

[ziaurrehman]

hey venkat! love ur all videos and learned alot from you bro.
the drag and drop functionality work perfect but the problem is how to persist the position of each element even if we refresh the page. Or how to save this as a template when set the dragging positions, i.e. saving the positions along with each element in database on Save Button Click and then get it back on Clicking Retrieve Button.

[niranjanbhoir]

Thank you so this was really helpful 👌