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

Question

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

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

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

有人对如何取消阻力有任何想法吗？无论鼠标是否位于正在拖动的 div 上，都可以通过 a 甚至在 akeydown上？mouseup

需要明确的是，我遇到的问题是有时我会拖动元素，但在调用mouseup时鼠标不在元素上。mouseup因此，该元素仍在拖动，并且我的手指不再放在鼠标上，并且无法阻止该元素拖动以将其返回到文档上。

编辑：这是一个jsfiddle，请注意我正在尝试让它在缩放容器上工作。YouTube 视频显示拖动故障

(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。这样，无论光标是否位于拖动的元素上，它都会触发。

如果您想在光标移出页面时取消拖动，请mouseleave在 document.body 上添加事件侦听器并使用它来取消拖动。

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

编辑__

对文档的处理mouseleave可防止其陷入可拖动状态。它还修复了您所看到的倍增运动。

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

编辑2__

以前的 JSFiddle 是不正确的。

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