我在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);

最佳答案

以下是一些可行的方法:

与其在目标元素上监听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/

10-05 20:49
查看更多