当鼠标滑离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);
});

EDIT2 __

以前的JSFiddle不正确。

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