JQuery UI Drag n' Drop Reverting

JQuery UI Drag n’ Drop Reverting

  |  967 Views

The jQuery UI is a very powerful tool that can greatly increase the interactivity of websites. Sometimes it doesn’t always provide the exact use we require. A prime example of this can be seen in the revert option for drag and drop objects. While the provided tools meet certain situations, the ability to revert an object back to its initial position when the page is loaded is not there. That’s where this friendly little demo comes in.

Below is a useful example of how to obtain the initial position of an object, set a variable to determine where the object has been dropped, and revert that object back to the original position all using the power of jQuery.

HTML

The markup for the html consisted of three elements: two < div > tags for the draggables and one < div > tag for the droppable.

1
2
3
4
5
6
7
8
9
<div id="drag" class="draggables ui-widget-content">
<!-- I revert back to this position always when not dropped on a droppable object. -->
</div>
<div id="drag2" class="draggables ui-widget-content">
<!-- I revert back to the last position I was dropped on -->
</div>
<div id="drop" class="ui-widget-header">
<!-- This is the drop target -->
</div>

CSS The theme being used is UI Lightness from the jQuery UI CSS. The only CSS that needs to be written is for the positioning of the draggable and droppable objects.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.draggables {
width: 150px;
height: 150px;
float: left;
padding: 5px;
margin: 5px;
}
#drop {
width: 150px;
height: 150px;
float: left;
padding: 5px;
margin: 5px;
}

JS

10
$( '#drag' ).data( 'left', $( '#drag' ).position( ).left ).data( 'top', $( '#drag' ).position( ).top);

Next, a variable is needed that will indicate whether or not a draggable object had been released on a droppable object. The activate and drop events are perfect for this situation. The activate event sets a hover variable to 0 (off) to insure a neutral drop zone when an item has begun to move. The drop event then sets the variable to 1 (on).

1
2
3
4
5
6
activate: function ( event, ui ) {
$( '#drop' ).data( 'hover', 0 );
},
drop: function ( event, ui ) {
$( '#drop' ).data( 'hover', 1 );
}

Lastly, the draggable objects position needs to be determined based on where dragging stops. This is through the stop event on the draggable object. Using a conditional if statement the hover variable is checked to see if it has a value of 1 (on) and if it does not then that means the object has not dropped on the droppable object and its position animates to the initial position that was retrieved when the page was loaded.

10
11
12
13
stop: function ( event, ui ) {
if ( $( '#drop' ).data( 'hover' ) != 1)
$('#drag').animate( { 'left': $( '#drag' ).data('left'), 'top': $( '#drag' ).data( 'top' )}, 'slow');}
}

Finally, remember to include the jQuery library and the jQuery UI.

About the Author

Richard Alvarez began his career at Microsoft, during which he wrote his first book on Adobe Flash, which was published by New Riders. He has worked with multiple start-up companies, which has taught him that the digital space is constantly evolving.

Prior to joining Saggezza, Richard helped form Method Engine’s philosophy of strategic design. He worked as lead IT at a small creative agency. During that time, he was key in creating technical solutions, based on consumer driven best practices.

Saggezza is a proven technology and consulting partner that delivers personalized, high-value solutions to accelerate business growth.

Share This
Related Articles
Saggezza Expands Midwest Presence with Strategic Acquisition of Omni Resources
52393 Views

Saggezza brings global capabilities and technical expertise to existing Omni customers while expanding its own talent and reach. March 18, […]

Understanding User Experience (UX) and Its Importance
Understanding User Experience (UX) and Its Importance
1264 Views

If you’re not thinking about your customer’s user experience, you should be. Understanding users and their needs and preferences is […]