使用jquery实现鼠标拖拽控制图片移动：每次mousedown的坐标都记录怎么回事

Question

这只是我的初始设想，还没做到这一步，现在遇到问题了，先上代码：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事件触发的坐标，但是次数已经变成了两次（也就是说，点击两下确定之后对话框才会消失），第三次要点三下……这是怎么回事，有谁知道？jquerymousedowndiv

Answer 1

bind是增加一个绑定的方法，直接mousedown(fn)才是覆盖事件。

Answer 2

var startX,startY,movingX,movingY,endX,endY;
$("#mouseevent").mousedown(function(event) { 
    startX = event.pageX;
    startY = event.pageY;
    //alert(startX+"-"+startY);
$(document).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).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;  
});同样的效果

Answer 3

是不是要判断一下当前对象is(":focus")时才执行事件？是不是alert()在对象上方点击确定时也会触发mousedown?

Answer 4

我参考了一下百度和谷歌的地图，发现只要是在地图上按下鼠标，即使把鼠标拖出了地图区域，地图也能移动，所有我就想直接统一使用整个屏幕的坐标（event.page）。
但是，我的确定按钮不在div上啊，而且，获得的坐标都是鼠标点下位置的坐标，只是alert的次数一次次增加。

Answer 5

我尝试了一下三个事件都在外面邦定就不会有问题了，为什么一定要通过mousedown邦定其他事件呢？

Answer 6

事件源就是触发事件的对象阿 var obj=event.srcElement || event.target;这样获取事件源，你要拖拽图片，那么拖拽正确时事件源肯定就是那个图片

Answer 7

jquery的事件在注册支持的时候只是把javascript中的on去掉了，所以jquery的事件名前面+on就是原来的javascript事件

Answer 8

不知道你用的什么版本，我的jquery1.7是没有drag这个方法的要邦定drag只能通过bind方法
不过在1.7中新增了on方法和one方法，on可以邦定所有事件用来替代以前的事件绑定方法，one则将事件邦定后只执行一次然后将事件程序删除。
LZ这种情况挺适合one方法

Answer 9

这样没用的，一般图片可以，我用的svg格式的，不行，我试过了，所以我才取巧套了个div，通过div控制。

Answer 10

我用的可以jquery1.8.1啊，没看见有drag方法的

Answer 11

那就用我上面说的one方法绑定事件了，如果用这个办法还是会弹出多次，那只能说明的确是触发了多次

Answer 12

$("#mouseevent").onemousedown(function(event) ……你说的是这个意思吗，我对java的概念都不是很理解的

Answer 13

one是jquery1.7新增的一个方法，使用时和bind一样，$("#mouseevent").one("mousedown",function(event){});

Answer 14

$("#mouseevent").bind("drag",function(){
alert("dd");
});
没效果的。

Answer 15

试过了，明白了one方法的意思，就是指执行一次，可是我的拖动不能只有一次啊？唉，纠结啊。

Answer 16

不影响拖动次数阿，因为你每次拖动都要从mousedown开始，那么每次都会重新绑定另外2个事件一次。

Answer 17

ok,我整出来了，用unbind，每次进入执行mousemove的时候用bind绑定一下，mouseup的时候用一下unbind，这样就只有一个值了