當鼠標滑過div時取消自定義拖動功能

Question

我在jquery中有一個可拖動的功能，因此我可以拖動和移動div上的元素。有時，當拖動鼠標離開div時，我無法放下元素。

我想，這樣按壓時，同樣的事情發生在.on("mouseup", function(event) {

我試着做.on("mouseup keydown", function(event) {添加​​事件的逃生按鈕或東西，但它並沒有趕上任何鍵被按下。

有沒有人有關於如何取消拖動的任何想法？不管鼠標是在div上還是在沒有被拖動的情況下，通過​​甚至在mouseup上？

只是要清楚，我遇到的問題有時會拖動元素，我會mouseup，但當調用mouseup時，鼠標不在元素上。因此，該元素仍在拖動，我不再有手指在鼠標上，並且我無法阻止元素拖動以重新獲取文檔。

編輯：這是一個jsfiddle，注意我試圖讓它在縮放的容器上工作。 youtube video showing drag glitch

(function($) { 
    $.fn.drags = function(opt, callback) { 
     opt = $.extend({ 
      handle: "", 
      cursor: "move" 
     }, opt); 
     if (opt.handle === "") { 
      var $el = this; 
     } else { 
      var $el = this.find(opt.handle); 
     } 
     return $el.css('cursor', opt.cursor).on("mousedown", function(e) { 
      if (opt.handle === "") { 
       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("mousemove", function(e) { 
       $('.draggable').offset({ 
        top: e.pageY + pos_y - drg_h, 
        left: e.pageX + pos_x - drg_w 
       }).on("mouseup", function() { 
        $(this).removeClass('draggable').css('z-index', z_idx); 
       }); 
      }); 
      e.preventDefault(); 
     }).on("mouseup", function(event) { 
      if (opt.handle === "") { 
       $(this).removeClass('draggable'); 
      } else { 
       $(this).removeClass('active-handle').parent().removeClass('draggable'); 
      } 

      if (typeof callback == 'function') { 
       alert("this is a callback"); 
      } 

     }); 
    } 
})(jQuery); 

Answer 1

下面是可能工作幾件事情：

而不是監聽mouseup目標元素上，聽它document.body。這樣，無論光標是否位於拖動的元素上，它都會觸發。

如果要在光標離開頁面時取消拖動，請在document.body上添加mouseleave的事件偵聽器，並使用它來取消拖動。

如果您製作代碼筆（或類似的）測試用例，我將很樂意深入研究代碼。

Edit__

在文檔處理mouseleave從陷入生活的可拖動狀態，阻止它。它還修復了您所看到的倍增運動。

$(document.body).on('mouseleave', function(){ 
    $el.removeClass('draggable').css('z-index', z_idx); 
}); 

Edit2__

上的jsfiddle是不正確的。

https://jsfiddle.net/spk4523t/6/