Revert a jQuery draggable object back to its original container on out event of droppable

Question

I have a draggable item which if not dropped in a droppable will revert. This works well until a user drops an item in the droppable. If they decide they've made a mistake anytime they pull the draggable out it reverts to the droppable. I would prefer that on out and deactivate the draggable goes back to its original container.

My code is below but I have provided a sample on jsFiddle.

HTML

<div id="origin">     <div id="draggable" class="ui-widget-content">         <p>I revert when I'm not dropped</p>     </div> </div> <div id="droppable" class="ui-widget-header">     <p>Drop me here</p> </div> 

JavaScript

$(function() {     $("#draggable").draggable({          revert:  function(dropped) {            var dropped = dropped && dropped[0].id == "droppable";            if(!dropped) alert("I'm reverting!");            return !dropped;         }      }).each(function() {         var top = $(this).position().top;         var left = $(this).position().left;         $(this).data('orgTop', top);         $(this).data('orgLeft', left);     });      $("#droppable").droppable({         activeClass: 'ui-state-hover',         hoverClass: 'ui-state-active',         drop: function(event, ui) {             $(this).addClass('ui-state-highlight').find('p').html('Dropped!');         },         out: function(event, ui) {                 // doesn't work but something like this                 ui.draggable.mouseup(function () {                 var top = ui.draggable.data('orgTop');                 var left = ui.draggable.data('orgLeft');                 ui.position = { top: top, left: left };             });         }     }); }); 

Answer 1

• TESTED with jquery 1.11.3 & jquery-ui 1.11.4

• DEMO: http://so.lucafilosofi.com/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of-d/

$(function() {     $("#draggable").draggable({         revert : function(event, ui) {             // on older version of jQuery use "draggable"             // $(this).data("draggable")             // on 2.x versions of jQuery use "ui-draggable"             // $(this).data("ui-draggable")             $(this).data("uiDraggable").originalPosition = {                 top : 0,                 left : 0             };             // return boolean             return !event;             // that evaluate like this:             // return event !== false ? false : true;         }     });     $("#droppable").droppable(); });