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   lt div id  origin  gt       lt div id  draggable  class  ui-widget-content  gt           lt p gt I revert when I m not dropped lt  p gt       lt  div gt   lt  div gt   lt div id  droppable  class  ui-widget-header  gt       lt p gt Drop me here lt  p gt   lt  div gt    JavaScript    function             draggable   draggable            revert   function dropped               var dropped   dropped  amp  amp  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

User · Answer

In case anyone s interested  here s my solution to the problem  It works completely independently of the Draggable objects  by using events on the Droppable object instead  It works quite well     function             draggable   draggable           opacity   4          create  function     this  data  position    this  position              cursor  move           start function     this  stop true true                    active   droppable           over  function event  ui                  ui helper  unbind  mouseup                       drop function event  ui               snapToMiddle ui draggable   this                       out function event  ui                 ui helper  mouseup function                     snapToStart ui draggable   this                                             function snapToMiddle dragger  target       var topMove   target position   top - dragger data  position   top    target outerHeight true  - dragger outerHeight true     2      var leftMove  target position   left - dragger data  position   left    target outerWidth true  - dragger outerWidth true     2      dragger animate  top topMove left leftMove   duration 600 easing  easeOutBack       function snapToStart dragger  target       dragger animate  top 0 left 0   duration 600 easing  easeOutBack

User · Answer

I ve found another easy way to deal with this problem  you just need the attribute    connectToSortable   to draggable like as below code           a1  a2   draggable           connectToSortable    b  a           revert   invalid             PS  More detail and example How to move Draggable objects between source area and target area with jQuery

User · Answer

I m not sure if this will work for your actual use  but it works in your test case - updated at http   jsfiddle net sTD8y 27     I just made it so that the built-in revert is only used if the item has not been dropped before   If it has been dropped  the revert is done manually   You could adjust this to animate to some calculated offset by checking the actual CSS properties  but I ll let you play with that because a lot of it depends on the CSS of the draggable and it s surrounding DOM structure     function             draggable   draggable           revert   function dropped                 var  draggable     this                    hasBeenDroppedBefore    draggable data  hasBeenDropped                     wasJustDropped   dropped  amp  amp  dropped 0  id     droppable                if wasJustDropped                        don t revert  it s in the droppable                  return false                 else                    if  hasBeenDroppedBefore                            don t rely on the built in revert  do it yourself                       draggable animate   top  0  left  0     slow                         return false                     else                           just let the built in revert work  although really  you could animate to 0 0 here as well                      return true                                                               droppable   droppable           activeClass   ui-state-hover           hoverClass   ui-state-active           drop  function event  ui                  this  addClass  ui-state-highlight   find  p   html  Dropped                   ui draggable  data  hasBeenDropped   true

User · Answer

TESTED with jquery 1 11 3  amp  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            quot  draggable quot   draggable           revert   function event  ui                   on older version of jQuery use  quot draggable quot                   this  data  quot draggable quot                  on 2 x versions of jQuery use  quot ui-draggable quot                   this  data  quot ui-draggable quot                 this  data  quot uiDraggable quot   originalPosition                     top   0                  left   0                               return boolean             return  event                 that evaluate like this                 return event     false   false   true                           quot  droppable quot   droppable

User · Answer

It s related about revert origin   to set origin when the object is drag   just use   this  data  draggable   originalPosition    top 0  left 0    For example   i use like this                 drag  function                         var t     this                       left   parseInt t css  left      -1                      if left  gt  0                            left   0                          t draggable   option    revert   true                              this  data  draggable   originalPosition    top 0  left 0                                              else t draggable   option    revert   false                             slider-work   css  left    left

User · Answer

If you want to revert the element to the source position if it s not dropped inside a  droppable element  just save the original parent element of the draggable at the start of the script  instead of the position   and if you verify that it s not dropped into  droppable  then just restore the parent of  draggable to this original element   So  replace this      each function         var top     this  position   top      var left     this  position   left        this  data  orgTop   top         this  data  orgLeft   left         with this      each function           this  data  originalParent     this  parent          Here  you ll have the original parent element of the draggable  Now  you have to restore it s parent in a precise moment   drop is called every time the element is dragged out from the droppable  not at the stop  So  you re adding a lot of event callbacks  This is wrong  because you never clean the mouseup event  A good place where you can hook a callback and check if the element was dropped inside or outside the  droppable element  is revert  and you re doing it right now  so  just delete the drop callback   When the element is dropped  and needs to know if it should be reverted or not  you know for sure that you ll not have any other interaction from the user until the new drag start  So  using the same condition you re using to know if it should revert or know  let s replace this alert with a fragment of code that  restores the parent element to the original div  and resets the originalPosition from the draggable internals  The originalPosition proeprty is setted at the time of  mouseStart  so  if you change the owner of the element  you should reset it  in order to make the animation of revert go to the proper place  So  let s set this to  top  0  left  0   making the animation go to the origin point of the element   revert  function dropped        var dropped   dropped  amp  amp  dropped 0  id     droppable       if  dropped              this  data  draggable   originalPosition    top 0  left 0            this  appendTo   this  data  originalParent              return  dropped      And that s it  You can check this working here  http   jsfiddle net eUs3e 1   Take into consideration that  if in any jQuery s UI update  the behavior of revert or originalPosition changes  you ll need to update your code in order to make it work  Keep in mind that   If you need a solution which doesn t make use of calls to the internals of ui draggable  you can make your body an droppable element with greedy option defined as false  You ll have to make sure that your body elements take the full screen   Good luck

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

Examples related to jquery

Examples related to jquery-ui