|
实现鼠标移动主要是涉及了鼠标的三个状态
（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; ??????? } 具体例子可见下一篇文章 |
?