Drag'n Drop

HTML-Einbindung
<!-- Script-Anfang --> <!-- www-java24.net - DIE Javascript - Ressource --> <!-- Diesen Code musst Du in den -head- einbauen --> <script language="JavaScript"> <!-- Drag n Drop script - kurt.grigg@virgin.net <!-- http://website.lineone.net/~kurt.grigg/javascript //Pre-load your images here. imgs=new Array("p1.gif","p2.gif","p3.gif","p4.gif","p5.gif") //Alter nothing past here! load=new Array() for(i=0; i < imgs.length; i++){ load[i]=new Image(); load[i].src=imgs[i]; } var ns=(document.layers); var ns6=(document.getElementById&&!document.all); var ie=(document.all); var n=imgs.length; var y=null; var x=null; var z=null; var w=null;//Alternate id. Not used for this script. if (ns||ns6){ window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP); document.releaseEvents(Event.MOUSEMOVE); } if (ns){window.onmousedown=down;window.onmouseup=up} if (ie||document.getElementById){document.onmousedown=down;document.onmouseup=up} function down(e){ if (ns){ if (document.layers['pics'+e.target.name]){ window.onmousemove=move; z=document.layers['pics'+e.target.name]; y=e.layerY; x=e.layerX; document.layers['pics'+e.target.name].zIndex=n++; } else {return true} w=z.name.charAt(z.name.length-1); } if (ie && window.event.srcElement.parentElement){ if (window.event.srcElement.parentElement.id.indexOf("pics") != -1){ document.onmousemove=move; z=window.event.srcElement.parentElement; y=window.event.offsetY; x=window.event.offsetX; w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1); window.event.srcElement.parentElement.style.zIndex=n++; } } if (ns6){ if (e.target.parentNode.id.indexOf("pics") != -1){ document.onmousemove=move; z=e.target.parentNode.style; x=e.clientX - parseInt(z.left); y=e.clientY - parseInt(z.top); w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1); z.zIndex=n++; } } return false; } function move(e){ if (ns && z){z.left=e.pageX-x;z.top=e.pageY-y;} if (ns6 && z){z.top=parseInt(e.clientY)-y;z.left=parseInt(e.clientX)-x} if (ie && z){z.style.posLeft=window.event.clientX-x;z.style.posTop=window.event.clientY-y} return false; } function up(e){ if (ie||ns6)document.onmousemove=null; if (ns)window.onmousemove=null; z=null; } //--> </script> <!-- Diesen Code musst Du in den -body- einbauen --> <div id="pics0" style="position:absolute;top:10px;left:10px;cursor:move"> <img src="your-imageA.gif" name="0"> </div> <div id="pics1" style="position:absolute;top:100px;left:10px;cursor:move"> <img src="your-imageB.gif" name="1"> </div> <!-- Script-Ende --> <!-- www-java24.net - DIE Javascript - Ressource -->