?

一、開篇

拖拽已經(jīng)是個(gè)Javascript的老話題了，但是也是最經(jīng)典的問題之一。在這里，我用面向?qū)ο蟮姆椒▽?shí)現(xiàn)了簡(jiǎn)單的拖拽，這是做復(fù)雜js效果的基礎(chǔ)。

二、原理

拖拽的原理很簡(jiǎn)單，就是捕獲鼠標(biāo)事件，作出應(yīng)有的相應(yīng)。

需要處理的鼠標(biāo)事件有三個(gè)：mousedown mousemove mouseup，下面分別介紹在各個(gè)事件需要處理一些什么事情。

1、?mousedown

（1）?????? 將鼠標(biāo)所點(diǎn)擊的對(duì)象position設(shè)置為absolute，這樣才可以通過設(shè)置top和left的值讓元素動(dòng)起來；

（2）?????? 獲得鼠標(biāo)點(diǎn)擊的這個(gè)時(shí)刻鼠標(biāo)與拖動(dòng)對(duì)象邊界的坐標(biāo)差（offsetX和offsetY），以便在拖動(dòng)的時(shí)候來確定拖動(dòng)對(duì)象的位置。

（3）?????? 注冊(cè)document的mousemove事件

2、?mousemove

（1）?????? 通過offsetX和offsetY以及鼠標(biāo)的即時(shí)位置來確定被拖動(dòng)對(duì)象的即時(shí)位置。

3、?mouseup

（1）?????? 刪除document注冊(cè)的mousemove事件

三、實(shí)現(xiàn)

主要的代碼如下：

?

function?Drag(oHandle,oContainer){
????if(typeof?Drag.zIndex?==?"undefined")
????????Drag.zIndex?=?1000;
????var?handle?=?oHandle;
????var?container?=?oContainer;
????var?offsetX?=?0;
????var?offsetY?=?0;
????var?isDragging?=?false;
????
???? var?mouseDown?=?function(){
????????oEvent?=?oEventUtil.getEvent();
????????Drag.zIndex++;
????????container.style.zIndex?=?Drag.zIndex;
????????if(oEvent.button?==?1?||?oEvent.button?==?0){
????????????container.style.position?=?'absolute';
????????????offsetX?=??oEvent.pageX?-?container.offsetLeft;
????????????offsetY?=?oEvent.pageY?-?container.offsetTop;
????????????if(handle.innerHTML?==?""){
????????????????handle.innerHTML?=?"?";
????????????};
????????????oEventUtil.addEventHandler(document,"mousemove",mouseMove);
????????????isDragging?=?true;
????????}
????};
????
??? var?mouseMove?=?function(){
????????oEvent?=?oEventUtil.getEvent();
????????if(isDragging){
????????????container.style.top?=?(oEvent.pageY?-?offsetY)?+?'px';
????????????container.style.left?=?(oEvent.pageX?-?offsetX)?+?'px';
????????}
????};

????var?mouseUp?=?function(){
????????isDragging?=?false;
????????oEventUtil.removeEventHandler(document,"mousemove",mouseMove);
????};
????
????oEventUtil.addEventHandler(handle,"mousedown",mouseDown);
????oEventUtil.addEventHandler(handle,"mouseup",mouseUp);
}

?

考慮到很多拖拽都是移動(dòng)拖動(dòng)條整個(gè)外框也要一起移動(dòng)，在實(shí)例化這個(gè)類的時(shí)候就傳遞兩個(gè)參數(shù)，一個(gè)是拖動(dòng)條的對(duì)象，一個(gè)是外框?qū)ο蟆?/span>

如果要使用很簡(jiǎn)單，代碼如下：

window.onload?=?function(){
????var?drag1?=?new?Drag(document.getElementById("header"),document.getElementById("container"));
????var?drag?=?new?Drag(document.getElementById("Div2"),document.getElementById("Div1"));
}

?

四、注意幾點(diǎn)

1、這里使用了對(duì)事件進(jìn)行過封裝的oEventUtil，這樣使得拖拽的結(jié)構(gòu)看起來更清晰。oEventUtil的具體代碼可以參看我以前寫的一篇博客，也可以直接下載本頁的實(shí)例。

2、鼠標(biāo)的三個(gè)事件所注冊(cè)的對(duì)象是不一樣的，mousedown和mouseup都要注冊(cè)到拖動(dòng)條這個(gè)對(duì)象上，而mousemove必須注冊(cè)到document上，這樣拖拽才能正常工作。因?yàn)槿绻?/span>mousemove注冊(cè)到拖動(dòng)條上的話，鼠標(biāo)移動(dòng)過快就會(huì)移出拖動(dòng)條，立刻就失去了mousemove的響應(yīng)，而注冊(cè)到document上就不會(huì)出現(xiàn)這個(gè)問題，因?yàn)槭髽?biāo)一直都在document上移動(dòng)，一直都會(huì)相應(yīng)。

五、實(shí)例下載

?點(diǎn)此下載示例?

轉(zhuǎn)載于:https://www.cnblogs.com/LongWay/archive/2008/09/03/1282492.html

總結(jié)

以上是生活随笔為你收集整理的Javascript实现最简跨平台面向对象拖拽的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。