Question

我正在尝试做一个简单的拖拽脚本。这个想法是在鼠标停止时保存位置，在鼠标移动时更新视图，在鼠标移动时停止。问题，mouseup事件无法正常工作。

参见代码：

var target = $('a')
var pos = 0;
var dragging = false;

$(document).mousedown(function(e) { pos=e.pageX; dragging = true })
$(document).mouseup(function() { dragging = false })
$(document).mousemove(function(e) {
    if(dragging){ 
        target.css('left', e.pageX-pos);
    }
})

为什么mouseup适用于“a”标记： http://jsfiddle.net/leyou/c3TrG/1/

为什么mouseup无法使用“img”标记： http://jsfiddle.net/leyou/eNwzv/

尝试水平拖动它们。

ie9，ff和chrome的问题相同。 Windows7的

Answer 1

只需将e.preventDefault()添加到您的mousedown处理程序中，如下所示：

var target = $('img')
var pos = 0;
var dragging = false;

$(document).mousedown(function(e) { e.preventDefault(); pos=e.pageX; dragging = true })
$(document).mouseup(function() { dragging = false })
$(document).mousemove(function(e) {
    if(dragging){ 
        target.css('left', e.pageX-pos);
    }
})

见工作demo。

基本原理是浏览器也在拖放图像并将其拖放到浏览器外的应用程序中（例如拖动图像并将其拖放到浏览器外的应用程序中），因此您需要使用.preventDefault()取消默认的拖放操作

鼠标移动到img后鼠标不起作用

1 个答案: