 <blockquote> <p>When the mouse is dragging a div element over a droppable area, pressing the ESC key should drag the element to an area that is not droppable</p> </blockquote> <p>I´ve created a <a href="http://run.plnkr.co/plunks/JSTWFTFoiz6yLWAQl2vH/"><code>demo</code></a> of a possible solution that you can check in plunker.</p> <p>As stated by <a href="http://stackoverflow.com/users/1272576/ioneyed"><code>@ioneyed</code></a>, you can select the dragged element directly using the selector <code>.ui-draggable-dragging</code>, which should be more efficient if you have lots of draggable elements.</p> <p>The code used is the following, however, apparently it's not working in the snippet section. Use the <code>fullscreen</code> feature on the plunker or reproduce it locally.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var CANCELLED_CLASS = 'cancelled'; $(function() { $(".draggable").draggable({ revert: function() { // if element has the flag, remove the flag and revert the drop if (this.hasClass(CANCELLED_CLASS)) { this.removeClass(CANCELLED_CLASS); return true; } return false; } }); $("#droppable").droppable(); }); function cancelDrag(e) { if (e.keyCode != 27) return; // ESC = 27 $('.draggable') // get all draggable elements .filter('.ui-draggable-dragging') // filter to remove the ones not being dragged .addClass(CANCELLED_CLASS) // flag the element for a revert .trigger('mouseup'); // trigger the mouseup to emulate the drop &amp; force the revert } $(document).on('keyup', cancelDrag);</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code> .draggable { padding: 10px; margin: 10px; display: inline-block; } #droppable { padding: 25px; margin: 10px; display: inline-block; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="droppable" class="ui-widget-header"&gt; &lt;p&gt;droppable&lt;/p&gt; &lt;/div&gt; &lt;div class="ui-widget-content draggable"&gt; &lt;p&gt;draggable&lt;/p&gt; &lt;/div&gt; &lt;div class="ui-widget-content draggable"&gt; &lt;p&gt;draggable&lt;/p&gt; &lt;/div&gt; &lt;div class="ui-widget-content draggable"&gt; &lt;p&gt;draggable&lt;/p&gt; &lt;/div&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"&gt;</code></pre> </div> </div> </p>