この記事では、ネイティブJavaScriptにおけるElement Dragの実装を紹介します。
アイデア：
1.最初にドラッグされた要素のレイアウト属性を変更すると、キーは「位置：絶対」です。
2.マウスイベント「Mousedown」、「Mousemove」、「MouseUp」をキャプチャします。
3。「Mousedown」がトリガーされると、元素の現在のマウスの相対的な位置を記録_x、_y;
4.次に、「Mousemove」イベントを処理し、要素の上部属性と左属性を変更して要素を移動します。
5。「マウスアップ」時間がトリガーされたら、ドラッグを停止します。
同時に、コードとブラウザの互換性のカプセル化を考慮する必要があります。コードは次のとおりです。
<！doctype html> <html> <head> <title> draggable div </title> <style type = "text/css"> body {margin：0;パディング：0;バックグラウンドカラー：#fff; } #drag_div {width：150px;高さ：150px;パディング：10px;マージン：10px;バックグラウンドカラー：＃66DD33;カーソル：移動; } </style> </head> </html> <body> <div id = "drag_div"> </div> </body> <script type = "text/javascript"> function drag（）{this.initialize.apply（this、arguments）; } drag.prototype = {// initialize 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）; // parameter this.setoptions（options）を設定します。 //「ハンドル」オブジェクトをマウスで「ドラッグ」に設定します（ドラッグされているオブジェクトからの違いに注意してください）this.handle = this。$（this.options.handle）; // callback関数を設定this.onstart = this.options.onstart; this.onmove = this.options.onmove; this.onStop = this.options.onStop; this.handle.style.cursor = "move"; this.changelayout（）; // start start drag event 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（）; }、moveRag：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、// event object onstart：function（）{}、// calling function onmove：function（）{}、// calling function onstop：function（）{} // calling onstop：function onstop}; 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>