title: Canceling a custom drag function when mouse slides off div
body: <p>I have a draggable function in jquery to make it so I can drag and move elements on a div. Sometimes, when dragging the mouse comes off the div and I am not able to put back down the element.</p>
  <p>I'm trying to add a <code>keydown</code> event for the escape button or something so that when pressed, the same thing happens on <code>.on(&quot;mouseup&quot;, function(event) {</code></p>
  <p>I've tried doing <code>.on(&quot;mouseup keydown&quot;, function(event) {</code> but it doesn't catch any keys that are being pressed.</p>
  <p>Does anyone have any ideas on how I can cancel the drag? Either by a <code>keydown</code> or even on a <code>mouseup</code> regardless of if the mouse is on the div or not that is being dragged?</p>
  <p>Just to be clear, the problem I am having is sometimes I will be dragging the element, I will <code>mouseup</code> but the mouse wasn't on the element when <code>mouseup</code> was called. Therefore, the element is still dragging and I no longer have my finger on the mouse and I have no way to stop the element from dragging to get it back on the document.</p>
  <h1><strong>EDIT</strong>: Here is a <a href="http://jsfiddle.net/spk4523t/1/" rel="nofollow noreferrer">jsfiddle</a>, notice I am trying to get this to work on a scaled container. <a href="https://www.youtube.com/watch?v=iVMGx13icHQ" rel="nofollow noreferrer">youtube video showing drag glitch</a></h1>
  <pre><code>(function($) {
      $.fn.drags = function(opt, callback) {
          opt = $.extend({
              handle: &quot;&quot;,
              cursor: &quot;move&quot;
          }, opt);
          if (opt.handle === &quot;&quot;) {
              var $el = this;
          } else {
              var $el = this.find(opt.handle);
          }
          return $el.css('cursor', opt.cursor).on(&quot;mousedown&quot;, function(e) {
              if (opt.handle === &quot;&quot;) {
                  var $drag = $(this).addClass('draggable');
              } else {
                  var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
              }
              var z_idx = $drag.css('z-index'),
                  drg_h = $drag.outerHeight(),
                  drg_w = $drag.outerWidth(),
                  pos_y = $drag.offset().top + drg_h - e.pageY,
                  pos_x = $drag.offset().left + drg_w - e.pageX;
              $drag.css('z-index', 1000).parents().on(&quot;mousemove&quot;, function(e) {
                  $('.draggable').offset({
                      top: e.pageY + pos_y - drg_h,
                      left: e.pageX + pos_x - drg_w
                  }).on(&quot;mouseup&quot;, function() {
                      $(this).removeClass('draggable').css('z-index', z_idx);
                  });
              });
              e.preventDefault();
          }).on(&quot;mouseup&quot;, function(event) {
              if (opt.handle === &quot;&quot;) {
                  $(this).removeClass('draggable');
              } else {
                  $(this).removeClass('active-handle').parent().removeClass('draggable');
              }
  
              if (typeof callback == 'function') {
                  alert(&quot;this is a callback&quot;);
              }
  
          });
      }
  })(jQuery);
  </code></pre>