In diesem Artikel wird die Implementierung von Elemente Drag in native JavaScript eingeführt.
Ideen:
1. Ändern Sie zuerst die Layoutattribute des gezogenen Elements, der Schlüssel ist "Position: absolut".
2. Fangen Sie die Mausereignisse "Mousedown", "Mousemove", "MouseUp";
3. Wenn "MouseDown" ausgelöst wird, zeichnen Sie die relative Position der aktuellen Maus im Element, _x, _y;
4. Verarbeiten Sie dann das "Mousemove" -Ereignis und bewegen Sie das Element, indem Sie die oberen und linken Attribute des Elements ändern.
5. Wenn die "Mauseup" -Time ausgelöst wird, schleppen Sie nicht mehr.
Gleichzeitig sollte die Einkapselung des Code- und Browserkompatibilität berücksichtigt werden. Der Code ist wie folgt:
<! DocType html> <html> <kopf> <titels> Draggable div </title> <style type = "text/css"> body {margin: 0; Polsterung: 0; Hintergrundfarbe: #fff; } #drag_div {width: 150px; Höhe: 150px; Polsterung: 10px; Rand: 10px; Hintergrundfarbe: #66dd33; Cursor: Bewegung; } </style> </head> </html> <body> <div id = "drag_div"> </div> </body> <script type = "text/javaScript"> Funktion Drag () {this.initialize.apply (this, Argumente); } Drag.Prototype = {// initialisieren: Funktion (Element, Optionen) {this.element = this. $ (Element); // Das Objekt wird geschleppt._x = this._y = 0; // Die Mausposition im Element this._MovedRag = this.bind (this, this.MovedRag); this._Stopdrag = this.bind (this, this.stopdrag); // den Parameter this.SetOptions (Optionen) festlegen; // Setzen Sie das "Handle" -Objekt auf "ziehen" mit der Maus (beachten Sie die Differenz von dem Objekt, das gezogen wird). Handle = this. // Setzen Sie die Rückruffunktion this.onstart = this.options.onstart; this.onmove = this.options.onMove; this.onstop = this.options.onstop; this.handle.style.cursor = "move"; this.changelayout (); // Registrieren Sie das Start -Drag -Ereignis This.addHandler (this.handle, "MouseDown", this.bind (this, this.startdrag)); }, // Ändern Sie das Layout -Attribut des gezogenen Objekts 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 (Ereignis) {var event = Ereignis || Fenster.Event; this._x = event.clientX - this.element.offsetLeft; this._y = event.clienty - this.element.offsettop; this.addHandler (Dokument, "Mousemove", this._Movedrag); this.addHandler (Dokument, "Mauseup", this._stopdrag); this.PreventDefault (Ereignis); this.handle.setcapture && this.handle.setcapture (); this.onstart (); }, bewegtRag: function (Ereignis) {var event = this.getEvent (Ereignis); 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 (Dokument, "MousEmove", this._Movedrag); this.removeHandler (Dokument, "MouseUp", this._Stopdrag); this.handle.releascapture && this.handle.releascapture (); this.onstop ()}, setoptions: function (options) {this.options = {Handle: this.element, // Ereignisobjekt onStart: function () {}, // Aufruf von Funktion onMove: function () {{}, // Aufruf auf Stop: Funktion () {} // Aufruf von Funktion auf dem Aufruf von Funktion () {} // {} // {{} // Aufruf auf die Funktion () aufrufen. für (var p in Optionen) {this.options [p] = Optionen [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); }}, remedHandler: function (element, eventType, Handler) {if (element.removeEventListener) {returnelement.removeEventListener (EventType, Handler, False); } else {return element.detACHEvent ("on" + eventType, Handler); }}, getEvent: function (Ereignis) {return event || Fenster.Event; }, PreventDefault: function (Ereignis) {if (Event.PreventDefault) {Event.PreventDefault (); } else {event.returnValue = false; }}, bind: function (obj, Handler) {return function () {return Handler.Apply (obj, argumente); }}}}; window.onload = function () {var drag_div = document.getElementById ("drag_div"); var drag = new Drag (Drag_div, {Handle: Drag_div}); } </script> </html>