Das Ziehen ist eine sehr coole Sache. Sie klicken auf ein Objekt, halten Sie die Maus gedrückt, verschieben die Maus in einen anderen Bereich und lassen die Maustaste los, um das Objekt hier zu platzieren.
Hier ist ein einfacher Fall:
HTML -Teil: Beachten Sie, dass das Ziehen von Elementen absolut definiert werden muss, das ist Position = absolut;
Die Codekopie lautet wie folgt: <div style = "Position: absolut; Höhe: 100px; Breite: 100px; Hintergrund: rot"> </div>
<script src = "dome.js"> </script>
JS -Teil (dome.js):
var eventUtil = {// Holen Sie sich das Ereignis und das Ziel getEvent: function (Ereignis) {Rückgabeereignis? Ereignis: window.event; }, GetTarget: Funktion (Ereignis) {return event.target || event.srcelement; }. } else if (element.attachEvent) {element.attachEvent ("on" + Typ, Handler); }}. } else if (element.detACHEvent) {element.detACHEvent ("on" + type, Handler); }}} var dragdrop = function () {// das Flag, um zu bestimmen, ob das DOM -Element Var Dragging = null; // Der Unterschied zwischen der oberen linken Ecke des DOM -Elements und dem Mauszeiger ist diffx = 0; diffy = 0; Funktion HandleEvent (Ereignis) {Event = eventUtil.geVent (Ereignis); var target = eventUtil.gettarget (Ereignis); Switch (Ereignis.Type) {case "MouseDown": // Bestimmen Sie, ob die Klasse des DOM -Elements das draggable Attribut enthält, wenn (Ziel.ClassName.indexof ("draggable")> -1) {Dragging = Ziel; diffx = event.clientX - target.OffsetLeft; diffy = event.clienty - target.offsettop; } brechen; Fall "MousEmove": if (schleppen! = null) {target target.style.top = event.clienty - diffy + "px"; } brechen; Fall "Mauseup": schleppen = null; brechen; }} return {enable: function () {eventUtil.adDeDevent (Dokument, "MouseDown", HandleEvent); EventUtil.AdDevent (Dokument, "Mousemove", HandleEvent); EventUtil.AdDevent (Dokument, "Mauseup", HandleEvent); }, deaktivieren: function () {eventUtil.delEvent (Dokument, "MouseDown", HandleEvent); EventUtil.deleVent (Dokument, "Mousemove", HandleEvent); EventUtil.deleVent (Dokument, "MouseUp", HandleEvent); }}} (); Dragdrop.enable ();Was hier erklärt werden muss, sind Diffx und Diffy, die den Unterschied zwischen der oberen linken Ecke des Elements und dem Mauszeiger darstellen.
Diffx = X -Koordinate der Maus - OffsetLeft des Elementobjekts
diffy = y Koordinate der Maus -Offsettop des Elementobjekts
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.