JQuery UI Drag n' Drop Reverting

JQuery UI Drag n’ Drop Reverting

  |  397 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
Customer Success as a Company Value: The Success Experience
199 Views

Keys to aligning your organization to focus on customer success. Customer Needs and the Customer Experience Cycle The Success Experience […]

Esther Galantowicz, Entrepreneur
The Entrepreneurs of Saggezza: Esther Galantowicz, Senior Communications Manager
1422 Views

Our new blog series, “The Entrepreneurs of Saggezza”, will feature the unique journeys Saggezzians have taken in their careers. Each […]