原生javascript實(shí)現(xiàn)拖動(dòng)元素示例代碼

更新時(shí)間：2014年09月01日 09:10:23 投稿：whsnow

首先改變被拖動(dòng)元素的布局屬性，接著捕捉鼠標(biāo)事件，當(dāng)觸發(fā)mousedown時(shí)，記錄下當(dāng)前鼠標(biāo)在元素中的相對(duì)位置，接著處理mousemove事件

本文介紹原生javascript實(shí)現(xiàn)元素拖動(dòng)。

思路：

1.首先改變被拖動(dòng)元素的布局屬性，關(guān)鍵是“position:absolue”；

2.捕捉鼠標(biāo)事件"mousedown","mousemove","mouseup"；

3.當(dāng)觸發(fā)"mousedown"時(shí)，記錄下當(dāng)前鼠標(biāo)在元素中的相對(duì)位置，_x,_y；

4.緊接著處理"mousemove"事件，通過(guò)改變?cè)氐膖op和left屬性來(lái)移動(dòng)元素；

5.當(dāng)觸發(fā)"mouseup"時(shí)間時(shí)，終止拖動(dòng)。

同時(shí)，應(yīng)考慮代碼的封裝性和瀏覽器的兼容性，代碼如下：

<!DOCTYPE html> 
<html> 
<head> 
<title>draggable div</title> 
<style type="text/css"> 
body{ 
margin: 0; 
padding: 0; 
background-color: #fff; 
} 

#drag_div{ 
width: 150px; 
height: 150px; 
padding: 10px; 
margin: 10px; 
background-color: #66dd33; 
cursor: move; 
} 
</style> 
</head> 
</html> 
<body> 
<div id="drag_div"></div> 
</body> 
<script type="text/javascript"> 

function Drag () { 
this.initialize.apply(this, arguments); 
} 

Drag.prototype = { 

// 初始化 
initialize : function (element, options) { 

this.element = this.$(element); // 被拖動(dòng)的對(duì)象 
this._x = this._y = 0; // 鼠標(biāo)在元素中的位置 
this._moveDrag = this.bind(this, this.moveDrag); 
this._stopDrag = this.bind(this, this.stopDrag); 

// 設(shè)置參數(shù) 
this.setOptions(options); 

// 設(shè)置鼠標(biāo)去“拖”的“柄”對(duì)象（注意與被拖動(dòng)的對(duì)象區(qū)別） 
this.handle = this.$(this.options.handle); 

// 設(shè)置回調(diào)函數(shù) 
this.onStart = this.options.onStart; 
this.onMove = this.options.onMove; 
this.onStop = this.options.onStop; 

this.handle.style.cursor = "move"; 

this.changeLayout(); 

// 注冊(cè)開(kāi)始拖動(dòng)事件 
this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag)); 
}, 

// 改變被拖動(dòng)對(duì)象的布局屬性 
changeLayout: function () { 
this.element.style.top = this.element.offsetTop + "px"; 
this.element.style.left = this.element.offsetLeft + "px"; 
this.element.style.position = "absolute"; 
this.element.style.margin = "0"; 
}, 

startDrag : function (event) { 
var event = event || window.event; 

this._x = event.clientX - this.element.offsetLeft; 
this._y = event.clientY - this.element.offsetTop; 

this.addHandler(document, "mousemove", this._moveDrag); 
this.addHandler(document, "mouseup", this._stopDrag); 

this.preventDefault(event); 

this.handle.setCapture && this.handle.setCapture(); 

this.onStart(); 
}, 
moveDrag : function (event) { 
var event = this.getEvent(event); 

var iTop = event.clientY - this._y; 
var iLeft = event.clientX - this._x; 

this.element.style.top = iTop + "px"; 
this.element.style.left = iLeft + "px"; 

this.onMove(); 
}, 
stopDrag : function () { 

this.removeHandler(document, "mousemove", this._moveDrag); 
this.removeHandler(document, "mouseup", this._stopDrag); 
this.handle.releaseCapture && this.handle.releaseCapture(); 

this.onStop() 

}, 
setOptions : function (options) { 
this.options = { 
handle: this.element, //事件對(duì)象 
onStart : function () {}, // 開(kāi)始時(shí)回調(diào)函數(shù) 
onMove : function(){}, // 拖拽時(shí)回調(diào)函數(shù) 
onStop : function(){} // 停止時(shí)回調(diào)函數(shù) 
}; 
for(var p in options){ 
this.options[p] = options[p]; 
} 
}, 
$ : function (id) { 
return typeof id === "string" ? document.getElementById(id):id; 
}, 
addHandler : function (element, eventType, handler) { 
if(element.addEventListener){ 
return element.addEventListener(eventType, handler, false); 
}else{ 
return element.attachEvent("on"+eventType, handler); 
} 
}, 
removeHandler : function (element, eventType, handler) { 
if(element.removeEventListener){ 
return element.removeEventListener(eventType, handler, false); 
}else{ 
return element.detachEvent("on" + eventType, handler); 
} 
}, 
getEvent: function (event) { 
return event || window.event; 
}, 
preventDefault: function (event) { 
if(event.preventDefault){ 
event.preventDefault(); 
}else{ 
event.returnValue = false; 
} 
}, 
bind : function (obj, handler) { 
return function () { 
return handler.apply(obj, arguments); 
} 
} 
}; 

window.onload = function () { 
var drag_div = document.getElementById("drag_div"); 

var drag = new Drag(drag_div, {handle: drag_div}); 
} 

</script> 
</html>

您可能感興趣的文章: