鼠标滑离 div 时取消自定义拖动功能

Question

我在 jquery 中有一个可拖动的函数来实现它，这样我就可以在 div 上拖动和移动元素。有时，当拖动鼠标离开 div 时，我无法放回元素。

我正在尝试为退出按钮或其他东西添加keydown 事件，以便在按下时，.on("mouseup", function(event) { 上会发生同样的事情

我试过.on("mouseup keydown", function(event) {，但它没有捕捉到任何被按下的键。

有人对我如何取消拖动有任何想法吗？通过keydown 甚至mouseup，无论鼠标是否在被拖动的 div 上？

需要明确的是，我遇到的问题是有时我会拖动元素，我会 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 的事件监听器并使用它来取消拖动。

如果您制作了代码笔（或类似的）测试用例，我将很乐意深入研究代码。

编辑__

在文档上处理mouseleave 可以防止它陷入可拖动状态。它还修复了您所看到的成倍运动。

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

编辑2__

以前的 JSFiddle 不正确。

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