Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

jquery draggable widget

Suggested Videos
Part 89 - jquery dialog widget
Part 90 - jquery dialog save to database
Part 91 - jquery button widget



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.
http://jqueryui.com/draggable

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 
Option Description
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 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 {
    height200px;
    width200px;
    background-colorred;
    colorwhite;
    displaytable-cell;
    vertical-alignmiddle;
    text-aligncenter;
}

jQuery

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

jQuery tutorial for beginners

No comments:

Post a Comment

It would be great if you can help share these free resources