DIVS ein und ausblenden lassen

[ftdesigner]

Hallo Leute des Seflhtml's,

Ich bin nun langsam aber sicher am verzweifeln.
Ich habe einen Drag'n'Drop erstellt, dieser Funktioniert wunderbar.
Nun war meine fantastische Idee, dass ich alles was ich nicht im Drag'n'Drop bereich habe einfach ausblende, um Speicher zu sparen.
Mein code schaut nun so aus.
Das wenn ich die Div boxen nach oben schiebe, diese reihe um reihe verschwinden.
Geht auch.
Wenn ich die Boxen wieder zurück ziehe und die Boxen wieder ins bild kommen, dann werden sie wieder sichtbar gemacht.
Geht auch.
Wenn ich die Boxen nach links schiebe verschwinden sie auch reihe um reihe.
Und wenn ich sie wieder zurückschiebe werden sie auch wieder sichtbar.

Aber was nicht geht ist:
Die Zwei Sachen zu verbinde.
Hoch runter geht, links rechts geht aber hoch runter und links rechts zusammen verhaut mir mein ganzes skript.
Versteht ihr das?

Ich füge euch mal das Script für die Drag'n'Drop-Geschichte bei.

Fals ihr ideen habt, was ich falsch mache, dann wär ich super froh, wenn ihr euch melden würdet.

Vielen Dank

var imgs=document.getElementsByTagName('img');  
  
var m=4;  
function drag(elementToDrag,event) {  
	var startX = event.clientX, startY = event.clientY;  
	var origX = elementToDrag.offsetLeft, origY = elementToDrag.offsetTop;  
	var deltaX = startX - origX, deltaY = startY - origY;  
	if (document.addEventListener) {  
		document.addEventListener("mousemove", moveHandler, true);  
		document.addEventListener("mouseup", upHandler, true);  
	} else if (document.attachEvent) {  
		elementToDrag.setCapture();  
		elementToDrag.attachEvent("onmousemove", moveHandler);  
		elementToDrag.attachEvent("onmouseup", upHandler);  
		elementToDrag.attachEvent("onlosecapture", upHandler);  
	} else {  
			var oldmovehandler = document.onmousemove;  
			var olduphandler = document.onmouseup;  
			document.onmousemove = moveHandler;  
			document.onmouseup = upHandler;  
	}  
		if (event.stopPropagation) event.stopPropagation();  
		else event.cancelBubble = true;  
	  
		if (event.preventDefault) event.preventDefault();  
		else event.returnValue = false;  
	  
	function moveHandler(e) {  
		if (!e) e = window.event;  
		  
			  
		elementToDrag.style.left = (e.clientX - deltaX) +"px";  
		  
  
		elementToDrag.style.top = (e.clientY - deltaY) +"px";  
		  
		if (e.stopPropagation) e.stopPropagation();  
		else e.cancelBubble = true;  
	}  
	function upHandler(e) {  
  
		if (!e) e = window.event;  
		if (elementToDrag.offsetLeft >= -3) {  
			elementToDrag.style.left = -4 + "px";  
			  
			  
  
		}  
		if (elementToDrag.offsetTop >= -3) {  
			elementToDrag.style.top = -4 + "px";  
			  
		}  
		if (elementToDrag.offsetLeft <= - document.getElementById("screen").offsetWidth+document.getElementById("display").offsetWidth) {  
			elementToDrag.style.left = - document.getElementById("screen").offsetWidth+document.getElementById("display").offsetWidth + "px";  
			  
		}  
		if (elementToDrag.offsetTop <= - document.getElementById("screen").offsetHeight+document.getElementById("display").offsetHeight) {  
			elementToDrag.style.top = - document.getElementById("screen").offsetHeight+document.getElementById("display").offsetHeight + "px";  
			  
		}  
				  
		if (document.removeEventListener) {  
			document.removeEventListener("mouseup", upHandler, true);  
			document.removeEventListener("mousemove",moveHandler, true);  
		}  
		else if (document.detachEvent) {  
			elementToDrag.detachEvent("onlosecapture", upHandler);  
			elementToDrag.detachEvent("onmouseup", upHandler)  
			elementToDrag.detachEvent("onmousemove", moveHandler);  
			elementToDrag.releaseCapture();  
		} else {  
			document.onmouseup = olduphandler;  
			document.onmousemove = oldmovehandler;  
		}  
		if (e.stopPropagation) e.stopPropagation();  
		else e.cancelBubble = true;  
		  
		  
		 for (l=0;l<40;l++){  
			var pos=document.getElementById("karte01").offsetHeight;  
			var over = -pos*l-pos-l;  
			var overright = -pos*l-pos-l;  
		  
			if (elementToDrag.offsetTop < over ){  
			  
				for (lhide=0;lhide<=3;lhide++){  
					var id = l*m+lhide;  
					imgs[id].style.visibility="hidden";  
				}  
		  
			}  
			if (elementToDrag.offsetLeft < over ){  
			  
				for (lhide=0;lhide<=4;lhide++){  
					var id = l+lhide*m;  
					imgs[id].style.visibility="hidden";  
				}  
			}  
		 }  
	}  
		for (l=0;l<40;l++){  
			var pos=document.getElementById("karte01").offsetHeight;  
			var over = -pos*l-pos-l;  
			var overright = -pos*l-pos-l;  
		  
			if (elementToDrag.offsetTop > over ){  
			  
				for (lhide=0;lhide<=3;lhide++){  
					var id = l*m+lhide;  
					imgs[id].style.visibility="visible";  
				}  
		  
			}  
			if (elementToDrag.offsetLeft > over ){  
			  
				for (lhide=0;lhide<=4;lhide++){  
					var id = l+lhide*m;  
					imgs[id].style.visibility="visible";  
				}  
			}  
		 }  
}

[LX]

Versteht ihr das?

Nicht ganz. Ich muß außerdem zugeben, dass Dein JS-Code mir Kopfschmerzen verursacht.

Ein Tip: verwende nach Möglichkeit global vorhandene Event-Handler (obj.onmousemove = function() { }), das erspart viel Ärger.

Noch ein Tip: schreibe objektorientiert. Und verwende Variablennamen, die etwas aussagen - falls das auch nicht hilft, nutze Kommentare, um Deinen Code mit Aussagekraft zu versehen.

Gruß, LX