我在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/