この記事では、ネイティブ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>