JavaScript实现鼠标拖拽的原理

JavaScript实现鼠标拖拽

2010-12-01 17:22

实现鼠标移动主要是涉及了鼠标的三个状态 （1）  在mousedown的时候需要进行确认的是当前鼠标和所要移动的对象的距离（top,left或者是x,y）,同时还要确认鼠标的左键是否按下，如果        更细致一点的话可以利用event.srcElement判断当前事件的对象是否是你想要的对象。尤其重要的一点是当前时间作用的对象必须要使        setCapture()这个函数对光标进行捕捉，否则是无法实现移动效果的。 （2）  在mousemove的时候需要将所要移动的对象的坐标重新进行设置。 （3）  在mouseup的时候也就结束了移动，主要就是利用releaseCapture()方法对光标进行释放。如果不进行释放，那么光标只能停留在作用对象上       不能进行其他操作了！ 详细的解释：     var move=false; //move获取的是是否满足拖动的条件     var x;//x获取的是在开始拖动的时候鼠标和想要移动的对象之间在x轴上的距离     var y;//y获取的是在开始拖动的时候鼠标和想要移动的对象之间在y轴上的距离 function StartDrag(obj) { /*这里event.button表示按下了鼠标左键     *event.srcElement可以捕获当前事件作用的对象，在这里做了限制是为了更加     *精确的定位你想要的对象，也可以不做限制     */        if(event.button==1&&event.srcElement.tagName.toUpperCase()=="TD"){         obj.setCapture();//使obj对象获得当前窗口里的鼠标         obj.style.background="#5f79d8";//设置颜色是为了拖动时有个颜色的对比反差         var all_div=$id("all_div");         /*获取当前鼠标位置和all_div对象的相对位置          *这里是视具体的情况而定，需要获得你想要拖动的对象和鼠标的相对位置          *可以是任何你想要移动的对象          */         x=event.clientX-parseInt(all_div.style.left);        //parseInt(),和parseFloat()可以把诸如3px,31.6a转换成数字3,31.6         y=event.clientY-parseInt(all_div.style.top);         move=true;          }         } 这里需要着重说明的是JavaScript中关于鼠标位置的一些属性：        clientX   clientY   可以设置或获取鼠标指针位置相对于当前窗口的x，y坐标，其中客户区域不包括窗口自身的控件和滚动条        offsetX   offsetY   可以设置或获取指针位置相对于触发事件的x,y坐标        screenX   screenY   可以获得鼠标指针位置相对于用户屏幕的x,y坐标(除非窗口最大化，否则一般不用)        x          y        可以设置或获取鼠标指针位置相对于父文档的x,y像素坐标（既当前窗口）                      function Drag(obj) {        if(move){          var oldwin=$id("all_div");          //这里设置需要移动的对象的位置，跟随鼠标的位置而定          oldwin.style.left=event.clientX-x;          oldwin.style.top=event.clientY-y;          }       }      function StopDrag(obj){          obj.style.background="#2e48a7";            /*释放鼠标，其实setCapture()，releaseCapture()有点类似             *于focus()和blur()两个方法的作用             */           obj.releaseCapture();           move=false;         } 具体例子可见下一篇文章