Databases
StackOverflow2013
Postsdbo
PORevert a jQuery draggable object back to its original container on out event of droppable
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORevert a jQuery draggable object back to its original container on out event of droppable
    text
    copied!<p>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.</p> <p>My code is below but I have provided <a href="http://jsfiddle.net/sTD8y/1/" rel="noreferrer">a sample on jsFiddle</a>.</p> <p>HTML</p> <pre><code>&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; </code></pre> <p>JavaScript</p> <pre><code>$(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 }; }); } }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload