日期:2014-05-16  浏览次数:20339 次

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