La traînée est une chose très cool. Vous cliquez sur un objet, maintenez la souris, déplacez la souris vers une autre zone et relâchez le bouton de la souris pour placer l'objet ici.
Voici un cas simple:
Pièce HTML: Notez que les éléments de traînée doivent être définis absolument, c'est-à-dire la position = absolue;
La copie de code est la suivante: <div style = "position: absolue; hauteur: 100px; largeur: 100px; arrière-plan: rouge"> </div>
<script src = "dome.js"> </ script>
JS Part (Dome.js):
var eventUtil = {// Obtenez l'événement et cible getEvent: function (event) {return event? Événement: Window.Event; }, getTarget: function (event) {return event.target || event.srcelement; }, // Ajouter l'événement d'écoute addEvent: function (élément, type, handler) {if (element.addeventListener) {element.addeventListener (type, handler, false); } else if (element.attachevent) {element.Attachevent ("on" + type, manageur); }}, // connecte l'événement d'écoute DeLevent: fonction (élément, type, gestionnaire) {if (element.reMoveEventListener) {element.reMoveEventListener (type, handler, false); } else if (element.detachevent) {element.detachevent ("on" + type, manageur); }}} var dragdrop = function () {// l'indicateur pour déterminer si l'élément DOM est glissé var dragging = null; // La différence entre le coin supérieur gauche de l'élément DOM et le pointeur de souris est diffx = 0; diffy = 0; Fonction HandleEvent (événement) {event = eventUtil.getEvent (événement); var cible = eventUtil.getTarget (événement); switch (event.type) {case "Mousedown": // Déterminez si la classe de l'élément DOM contient l'attribut draggable if (target.classname.indexof ("draggable")> -1) {dragging = cible; diffx = event.clientx - target.offsetLeft; diffy = event.clienty - Target.offSetTop; } casser; case "MouseMove": if (dragging! = null) {Target.style.left = event.clientx - diffx + "px"; Target.style.top = event.clienty - diffy + "px"; } casser; cas "sourisp": glisser = null; casser; }} return {activer: function () {eventUtil.addevent (document, "Mousedown", handleEvent); EventUtil.addevent (document, "MouseMove", HandleEvent); EventUtil.Addevent (document, "MouseUp", HandleEvent); }, Disable: function () {eventUtil.Delevent (document, "Mousedown", mangeevent); EventUtil.delevent (document, "MouseMove", HandleEvent); EventUtil.devent (document, "MouseUp", mancheevent); }}} (); Dragdrop.enable ();Ce qui doit être expliqué ici est diffx et diffy, qui représente la différence entre le coin supérieur gauche de l'élément et le pointeur de la souris.
diffx = x coordonnée de la souris - décalage de l'objet élémentaire
Diffy = y coordonnées de la souris - décalage de l'objet élémentaire
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.