Drag & Drop Navigation

  • Hier mal ein Beispiel einer Drag & Drop Navigation - als leere Webseite mit dem frei verschiebbaren Navigationselement.

    <html><body onload="checkVersion4()"><SCRIPT LANGUAGE="JavaScript">function checkVersion4() {var x = navigator.appVersion;y = x.substring(0,4);if (y>=4) setVariables();moveOB();}function setVariables() {if (navigator.appName == "Netscape") {h=".left=";v=".top=";dS="document.";sD="";}else{h=".pixelLeft=";v=".pixelTop=";dS="";sD=".style";}objectX="object11"XX=-70;YY=-70;OB=11;}function setObject(a) {objectX="object"+a;OB=a;XX=eval("xpos"+a);YY=eval("ypos"+a);}function getObject() {if (isNav) document.captureEvents(Event.MOUSEMOVE);}function releaseObject() {if (isNav) document.releaseEvents(Event.MOUSEMOVE);check="no";objectX="object11";document.close();}function moveOB() {eval(dS + objectX + sD + h + Xpos);eval(dS + objectX + sD + v + Ypos);}var isNav = (navigator.appName.indexOf("Netscape") !=-1);var isIE = (navigator.appName.indexOf("Microsoft") !=-1);nsValue=(document.layers);check="no";function MoveHandler(e) {Xpos = (isIE) ? event.clientX : e.pageX;Ypos = (nsValue) ? e.pageY : event.clientY;if (check=="no") {diffX=XX-Xpos;diffY=YY-Ypos;check="yes";if (objectX=="object11") check="no";}Xpos+=diffX;Ypos+=diffY;if (OB=="1") xpos1=Xpos,ypos1=Ypos;moveOB();}if (isNav) {document.captureEvents(Event.CLICK);document.captureEvents(Event.DBLCLICK);}xpos1=50; ypos1=50; xpos11 = -50;ypos11 = -50;Xpos=5;Ypos=5;document.onmousemove = MoveHandler;document.onclick = getObject;document.ondblclick = releaseObject;// --></script><div id="object1" style="position:absolute; visibility:show; left:50px; top:50px; z-index:2"><table border="1" cellpadding="3" bgcolor="#426399" width="150"><tr><td bgcolor=white><a href="javascript:void(0)" onmousedown="setObject(1)"><font class="slb">Menü</a></td></tr><tr><td><A HREF="http://seite.de" target="_blank"><font class="slb" color="white">eins</A><A HREF="http://seite.de/"><font class="slb" color="white">zwei</a><A HREF="http://seite.de/"><font class="slb" color="white">drei</a><A HREF="http://seite.de/"><font class="slb" color="white">vier</a></td></tr></table></div><div id="object11" style="position:absolute; visibility:show; left:-70px; top:-70px; z-index:2"></div></body></html> Den <body>-Tag jeweils erweitern, dann den Rest in die Seite einfügen. Variabel ist die Ausgestaltung des Menüs mit Links, target, Größe und Farbe. Auch kann es platziert werden (Startplatzierung), wo gewünscht. Dann: Das Menü wird per Klick von einem Ort zum anderen Ort der Seite gezogen. Bei einem Klick aktiviert man den Zieh-(Drag)Modus und mit einem Doppelklick wird das Menü an der gewünschten Stelle abgelegt (Drop). Viel Spaß!