原生javascript實現拖動元素範例程式碼_javascript技巧

本文介紹原生javascript實現元素拖動。

思路：

1.首先改變被拖動元素的布局屬性，關鍵是“position:absolue”；

2.捕捉滑鼠事件"mousedown","mousemove","mouseup"；

3.當觸發"mousedown"時，記錄下當前滑鼠在元素中的相對位置，_x,_y；

4.緊接著處理"mousemove"事件，通過改變元素的top和left屬性來移動元素；

5.當觸發"mouseup"時間時，終止拖動。

同時，應考慮代碼的封裝性和瀏覽器的相容性，代碼如下：

<!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); // 被拖動的對象 this._x = this._y = 0; // 滑鼠在元素中的位置 this._moveDrag = this.bind(this, this.moveDrag); this._stopDrag = this.bind(this, this.stopDrag); // 設定參數 this.setOptions(options); // 設定滑鼠去“拖”的“柄”對象（注意與被拖動的對象區別） this.handle = this.$(this.options.handle); // 設定回呼函數 this.onStart = this.options.onStart; this.onMove = this.options.onMove; this.onStop = this.options.onStop; this.handle.style.cursor = "move"; this.changeLayout(); // 註冊開始拖動事件 this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag)); }, // 改變被拖動對象的布局屬性 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, //事件對象 onStart : function () {}, // 開始時回呼函數 onMove : function(){}, // 拖拽時回呼函數 onStop : function(){} // 停止時回呼函數 }; 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>