template

Index :: Javascript :: Maus: Dragging

Ein Dragging besteht aus drei Phasen: 1. Drücken der Maustaste (über einem Objekt), 2. Bewegen der Maus (Objekt verschieben) und 3. Loslassen der Maustaste. Wir müssen also document-Mausevents abfangen um entsprechend auf Benutzeraktionen reagieren zu können.

Zuerst leiten wir das onmousedown-Event auf eine eigene Down-Funktion um. Hier prüfen wir, ob etwas angeklickt wurde, das zum Verschieben vorgesehen ist (solch ein Element, das an seiner ID erkannt wird, muss die STYLE-Attribute 'POSITION:relative; LEFT:0; TOP:0;' besitzen). Falls ja, merken wir uns das Element, seine augenblickliche Position und die Mausposition. Ausserdem setzen wir ein Dragging-Flag (bedeutet: Element wird von Maus festgehalten) und leiten das onmousemove-Event auf eine eigene Move-Funktion um.

Sobald ein onmousemove-Event eintritt, prüft unsere Move-Funktion, ob das Dragging-Flag gesetzt ist. Falls ja, holen wir uns die neue Mausposition, errechnen die neue Position des zu bewegenden Elements und weisen sie ihm zu.

Durch das onmouseup-Event wird dann lediglich das Dragging-Flag wieder gelöscht (bedeutet: Maus hat Element losgelassen).

Demo: Diese Kugel ist verschiebbar: (zurücksetzen)

Hier der verwendete Quellcode:
Javascript im Header
var ie = document.all; //---- Dragging var DragObj = null, DragX, DragY, DownX, DownY, DragID = 0, Dragging = false; function Drag_Down(e) { var o = ie? event.srcElement: e.target; if (o.id.substr(0, 4) != "drag") return true; Dragging = true; DragObj = o.style; DragID = parseInt(o.id.substr(4, o.id.length-4)); DownX = parseInt(DragObj.left); DownY = parseInt(DragObj.top); DragX = ie? event.clientX: e.clientX; DragY = ie? event.clientY: e.clientY; document.onmousemove = Drag_Move; return false; } function Drag_Move(e) { if (!Dragging) return true; var x = DownX - DragX + (ie? event.clientX: e.clientX); var y = DownY - DragY + (ie? event.clientY: e.clientY); switch (DragID) { case 1: DragObj.left = x; DragObj.top = y; break; } return false; } document.onmousedown = Drag_Down; document.onmouseup = new Function("Dragging = false");
Weiter unten, im BODY, das HTML-Element (Bild):
<img id='drag1' src='marker.gif' style='POSITION:relative; LEFT:0; TOP:0; CURSOR:pointer;'>

Index :: Javascript


template