Cet article présente la mise en œuvre de la traînée des éléments dans JavaScript natif.
Idées:
1. Changez d'abord les attributs de mise en page de l'élément traîné, la clé est "Position: absolu";
2. Capturez les événements de la souris "Mousedown", "Mousemove", "Mouseup";
3. Lorsque "Mousedown" est déclenché, enregistrez la position relative de la souris actuelle dans l'élément, _x, _y;
4. Ensuite, traitez l'événement "MouseMove" et déplacez l'élément en modifiant les attributs supérieurs et gauche de l'élément;
5. Lorsque le temps "Mouseup" est déclenché, arrêtez de glisser.
Dans le même temps, l'encapsulation du code et de la compatibilité du navigateur doit être envisagée. Le code est le suivant:
<! Doctype html> <html> <éad- head> <itle> drawgable div </tapt> <style type = "text / css"> body {margin: 0; rembourrage: 0; Color d'arrière-plan: #FFF; } #drag_div {width: 150px; hauteur: 150px; rembourrage: 10px; marge: 10px; Color d'arrière-plan: # 66DD33; curseur: déplacer; } </ style> </ head> </ html> <body> <div id = "drag_div"> </ div> </ body> <script type = "text / javascript"> function drag () {this.inialialize.apply (this, arguments); } Glisser.prototype = {// initialize initialize: function (élément, options) {this.element = this. $ (Élément); // l'objet est glissé ce._x = this._y = 0; // la position de la souris dans l'élément this._MovedRag = this.bind (this, this.MovedRag); this._stopdrag = this.bind (this, this.stopdrag); // définit le paramètre this.setOptions (options); // Définissez l'objet "Handle" sur "glisser" avec la souris (notez la différence par rapport à l'objet en cours de glissement) this.handle = this. $ (This.options.handle); // Définissez la fonction de rappel this.onstart = this.options.onstart; this.onmove = this.options.onmove; this.onstop = this.options.onstop; this.handle.style.cursor = "move"; this.changelayout (); // Enregistrez l'événement DRART Drag This.AddHandler (this.handle, "Mousedown", this.bind (this, this.startDrag)); }, // Modifiez l'attribut de mise en page de l'objet glissé ChangeLayout: function () {this.element.style.top = this.element.offsettop + "px"; this.element.style.left = this.element.offsetleft + "px"; this.element.style.position = "absolu"; this.element.style.margin = "0"; }, startDrag: fonction (événement) {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 (événement); this.handle.setCapture && this.handle.setCapture (); this.onstart (); }, mobtrag: function (event) {var event = this.getEvent (événement); 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, "sourisp", this._stopdrag); this.handle.releasecapture && this.handle.releascapture (); this.onstop ()}, setOptions: function (options) {this.options = {handle: this.element, // objet d'événement onStart: function () {}, // function d'appel onMove: function () {}, // function d'appel sur lestop: function () {} // function d'appel sur Oat: function () {} // function d'appel sur sur sur onstop}; pour (var p dans les options) {this.options [p] = options [p]; }}, $: fonction (id) {return typeof id === "String"? document.getElementById (id): id; }, addHandler: function (élément, eventType, handler) {if (element.addeventListener) {return element.addeventListener (eventType, handler, false); } else {return element.attachevent ("on" + EventType, Handler); }}, dev-handler: function (élément, eventType, handler) {if (element.reMoveEventListener) {return element.removeEventListener (EventType, Handler, false); } else {return element.detachevent ("on" + EventType, Handler); }}, getEvent: fonction (événement) {return event || window.event; }, empêcherdFault: 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>