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;

??????? }

具体例子可见下一篇文章

?