使用jquery实现鼠标拖拽控制图片移动:每次mousedown的坐标都记录咋回事
使用jquery实现鼠标拖拽控制图片移动:每次mousedown的坐标都记录怎么回事
这只是我的初始设想,还没做到这一步,现在遇到问题了,先上代码:
如代码所示,我在div(id=“mouseevent”)上绑定了一个mousedown事件,在这个事件里又添加了一个mousemove和mouseup事件,表示只有在div里点击之后才会触发后面的这两个事件,在div外面点击没效果,但是问题是,每次我在div上点击之后,第一次div会弹出mousedown事件触发位置的坐标,第二次虽然也会弹出第二次mousedown事件触发的坐标,但是次数已经变成了两次(也就是说,点击两下确定之后对话框才会消失),第三次要点三下……这是怎么回事,有谁知道?
------解决方案--------------------
你用bind("drag",function(){....});
------解决方案--------------------
不影响拖动次数阿,因为你每次拖动都要从mousedown开始,那么每次都会重新绑定另外2个事件一次。
这只是我的初始设想,还没做到这一步,现在遇到问题了,先上代码:
var startX,startY,movingX,movingY,endX,endY;
$("#mouseevent").bind("mousedown", function(event) { //$(this).text(event.pageX+"-----"+event.pageY);
startX = event.pageX;
startY = event.pageY;
$(document).bind("mousemove",function(evt){
//$(this).text(evt.pageX+"..."+evt.pageY);
movingX = evt.pageX;
movingY = evt.pageY;
moveX = movingX - startX;
moveY = movingY - startY;
$("#mouseevent").text(moveX+"..."+moveY);
});
$(document).bind("mouseup",function(e){
endX = e.pageX;
endY = e.pageY;
//moveX = endX - startX;
//moveY = endY - startY;
alert(startX+"-"+startY);
//alert(endX+"--"+endY);
return false;
});
return false;
});
如代码所示,我在div(id=“mouseevent”)上绑定了一个mousedown事件,在这个事件里又添加了一个mousemove和mouseup事件,表示只有在div里点击之后才会触发后面的这两个事件,在div外面点击没效果,但是问题是,每次我在div上点击之后,第一次div会弹出mousedown事件触发位置的坐标,第二次虽然也会弹出第二次mousedown事件触发的坐标,但是次数已经变成了两次(也就是说,点击两下确定之后对话框才会消失),第三次要点三下……这是怎么回事,有谁知道?
jquery
mousedown
div
------解决方案--------------------
你用bind("drag",function(){....});
------解决方案--------------------
不影响拖动次数阿,因为你每次拖动都要从mousedown开始,那么每次都会重新绑定另外2个事件一次。