日期:2014-05-16 浏览次数:20348 次
实现鼠标移动主要是涉及了鼠标的三个状态
(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
免责声明: 本文仅代表作者个人观点,与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
|