我正在尝试做一个简单的拖动脚本。
这个想法是在鼠标按下时保存位置,在鼠标移动时更新视图,并在鼠标抬起时停止。问题,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/ http://jsfiddle.net/leyou/c3TrG/1/
为什么 mouseup 不能与“img”标签一起使用:http://jsfiddle.net/leyou/eNwzv/ http://jsfiddle.net/leyou/eNwzv/
只需尝试水平拖动它们即可。
在 ie9、ff 和 chrome 中也有同样的问题。 Windows 7的
只需添加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 http://jsfiddle.net/eNwzv/1/ .
修复的基本原理是,浏览器也在执行自己的本机图像拖放操作(例如,当您将图像拖出浏览器以将其放入外部应用程序时),因此您需要取消该默认设置原生拖放.preventDefault()
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)