template
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;'>
| template |
 |