JavaScripts -> Interaktion -> Drag&Drop

Drag und Drop. Es können beliebige HTML-Elemente gezogen werden (Einzige Voraussetzung: CSS-Attribut "position:absolute")

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<script type="text/javascript">
<!--

//DragDrop-Script (c) 2003 Triple-M

//Scriptaufruf / script usage: <div id="xxx" onMouseDown="startdrag('xxx')">
//xxx kann selbstverständlich ersetzt werden. xxx is replaceable.

var mousex=-1;
var mousey=-1;
var ddxoff=-1;
var ddyoff=-1;
var dragging=0;
var inter;
var ddel;

function ddup() {
if(dragging) {
xleft=mousex+ddxoff;
xtop=mousey+ddyoff;
ddel.style.left = xleft+"px";
ddel.style.top = xtop+"px";
}
}

function startdrag(element) { //Parameter: Id des Zielobjektes / ID of target object
if((mousex<0) || (dragging)) {
//Draggen fehlgeschlagen. Hier koennte eine Message Box aufgerufen werden
//Dragging failed. You may insert a message box here
} else {
dragging=1;
ddel=document.getElementById(element);
ddxoff=parseInt(ddel.style.left)-mousex;
ddyoff=parseInt(ddel.style.top)-mousey;
inter=window.setInterval("ddup()",100);
}
}

function stopdrag() {
if(dragging) {
dragging=0;
ddxoff=-1;
ddyoff=-1;
window.clearInterval(inter);
}
}

function capturemouse(nsevent) {
if(window.event) {
mousex=window.event.screenX;
mousey=window.event.screenY;
}
else {
mousex=nsevent.screenX;
mousey=nsevent.screenY;
}
}

document.onmousemove=capturemouse;
document.onmouseup=stopdrag;
//-->
</script>