Buttons aufheben und setzen

DrScheel

DrScheel

Grünschnabel
Gibt es einen Weg über Javascript buttons oder andere Teile einer Seite per Maus klick so zu sagen "auf zu heben" und wo anderes wieder ab zu setzten.
Oder muss man dazu ein Appelfenster verwenden??
 
das kann man verwirklichen

so:

Code: 
<script language="JavaScript">

var isNav4 = false;
var isW3C = false;
var isIE = false;

var dx = 0, dy = 0;
var objList = new Array();
var current = null;
var zIndexTop = 10;


function init() {
	// Browser ueberpruefen
	if (navigator.appName.indexOf("Netscape") != -1) {
		if (parseInt(navigator.appVersion) == 4) {
			// Netscape Communicator 4.x
			isNav4 = true;
		} else if (parseInt(navigator.appVersion) >= 5) {
			// Netscape 6 oder Mozilla
			isW3C = true;
		}
	} else { 
		if ((parseInt(navigator.appVersion) >= 4) && 
			(navigator.appName.indexOf("Microsoft") != -1)) {
			// MSIE 4.x oder hoeher
			isIE = true;
		}
		
		if (navigator.userAgent.indexOf("Opera 5") != -1) {
			// Opera 5.x - wird wie MSIE behandelt
			isIE = true;
		}
	}
	
	// Festlegen der Objekte
	erzeugeListe("test");

	// Event Capturing
	if ((isNav4) || (isW3C)) {
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
	}
  
	document.onmousedown = startDrag;
	document.onmouseup = endDrag;
}

function erzeugeListe() {
  for (var i = 0; i < erzeugeListe.arguments.length; i++) {
    if (isNav4) {
    	objList[i] = document.layers[erzeugeListe.arguments[i]];
    }
  }
}

function startDrag(e) {
	var found = false;
	var i = objList.length;

	if (isNav4) {
		var zIndexGefunden = 0;
		var gefunden = 0;
		
		while ((i > 0)) {
			i--;
			var obj = objList[i];

			// Ueberpruefen, welches Objekt angeklickt wurde
			if ((e.pageX > obj.left) && 
				(e.pageX < obj.left + obj.clip.width) &&
				(e.pageY > obj.top) &&
				(e.pageY < obj.top + obj.clip.height)) {
        
				if (obj.zIndex > zIndexGefunden) {
					found = true;
					gefunden = i;
					zIndexGefunden = obj.zIndex;
				}
			}
		}

		if (found) {
			current = objList[gefunden];
			
			dx = e.pageX - current.left;
			dy = e.pageY - current.top;
			
			// Setze Objekt nach oben
			zIndexTop++;
			current.zIndex = zIndexTop;
      
			// Event-Capturing
			document.captureEvents(Event.MOUSEMOVE);
			document.onmousemove = drag;
			return false;
		}
	} 

	if (isW3C) {
		var obj = e.target;
		if  ((obj.parentNode.id != null) &&
			(obj.parentNode.id.indexOf("bild") != -1)) {
			current = obj.parentNode.style;
      
			dx = e.clientX - parseInt(current.left);
			dy = e.clientY - parseInt(current.top);

			// Setze Objekt nach oben
			zIndexTop++;
			current.zIndex = zIndexTop;
      
	  		document.captureEvents(Event.MOUSEMOVE);
			document.onmousemove = drag;
			return false;
		}
	}
	
	if (isIE) {
		var obj = window.event.srcElement;
		if ((obj.parentElement != null) && 
			(obj.parentElement.id.indexOf("bild") != -1)) {
			current = obj.parentElement.style;
      
			dx = window.event.clientX - current.pixelLeft;
			dy = window.event.clientY - current.pixelTop;
		
			// Setze Objekt nach oben
			zIndexTop++;
			current.zIndex = zIndexTop;
      
			document.onmousemove = drag;
			return false;
		}
	}

	// Benutzer hat auf kein Objekt geklickt
	current = null;
	return false;
}

function drag(e) {
	if (current != null) {
		if (isNav4) {
			current.top = e.pageY - dy;
			current.left = e.pageX - dx;
		}
		if (isW3C) {
			current.top = parseInt(e.clientY) - dy;
			current.left = parseInt(e.clientX) - dx;
		}
		if (isIE) {
			current.pixelTop = window.event.clientY - dy;
			current.pixelLeft = window.event.clientX - dx;
		}
	}
  
	return false;
}

function endDrag(e) {
	if ((isNav4) || (isW3C)) {
		document.releaseEvents(Event.MOUSEMOVE);
	}

	document.onmousemove = null;
	current = null;
  
	return false;
}

</script>

</head>

<body onload="init()">

<div id="test" style="position:absolute; left:50px; top:100px;">
<img src="test.gif"></div>
 
Bei mir functioniert das nicht.
Warum machst du eine Browser überprüfung??
Funktioniert es denn nur auf Netscape, wenn ja dann kann es bei mir nicht geh weil ich mit dem Internet Explorer arbeite könnte man das umforemen??
 
ups,sry

so geht es (;


PHP: 
<script language="JavaScript"> 

var isNav4 = false; 
var isW3C = false; 
var isIE = false; 

var dx = 0, dy = 0; 
var objList = new Array(); 
var current = null; 
var zIndexTop = 10; 

function init() { 
// Browser ueberpruefen 
if (navigator.appName.indexOf("Netscape") != -1) { 
if (parseInt(navigator.appVersion) == 4) { 
// Netscape Communicator 4.x 
isNav4 = true; 
} else if (parseInt(navigator.appVersion) >= 5) { 
// Netscape 6 oder Mozilla 
isW3C = true; 
} 
} else { 
if ((parseInt(navigator.appVersion) >= 4) && 
(navigator.appName.indexOf("Microsoft") != -1)) { 
// MSIE 4.x oder hoeher 
isIE = true; 
} 

if (navigator.userAgent.indexOf("Opera 5") != -1) { 
// Opera 5.x - wird wie MSIE behandelt 
isIE = true; 
} 
} 

// Festlegen der Objekte 
erzeugeListe("test"); 

// Event Capturing 
if ((isNav4) || (isW3C)) { 
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); 
} 

document.onmousedown = startDrag; 
document.onmouseup = endDrag; 
} 

function erzeugeListe() { 
for (var i = 0; i < erzeugeListe.arguments.length; i++) { 
if (isNav4) { 
objList[i] = document.layers[erzeugeListe.arguments[i]]; 
} 
} 
} 

function startDrag(e) { 
var found = false; 
var i = objList.length; 

if (isNav4) { 
var zIndexGefunden = 0; 
var gefunden = 0; 

while ((i > 0)) { 
i--; 
var obj = objList[i]; 

// Ueberpruefen, welches Objekt angeklickt wurde 
if ((e.pageX > obj.left) && 
(e.pageX < obj.left + obj.clip.width) && 
(e.pageY > obj.top) && 
(e.pageY < obj.top + obj.clip.height)) { 

if (obj.zIndex > zIndexGefunden) { 
found = true; 
gefunden = i; 
zIndexGefunden = obj.zIndex; 
} 
} 
} 

if (found) { 
current = objList[gefunden]; 

dx = e.pageX - current.left; 
dy = e.pageY - current.top; 

// Setze Objekt nach oben 
zIndexTop++; 
current.zIndex = zIndexTop; 

// Event-Capturing 
document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = drag; 
return false; 
} 
} 

if (isW3C) { 
var obj = e.target; 
if ((obj.parentNode.id != null) && 
(obj.parentNode.id.indexOf("bild") != -1)) { 
current = obj.parentNode.style; 

dx = e.clientX - parseInt(current.left); 
dy = e.clientY - parseInt(current.top); 

// Setze Objekt nach oben 
zIndexTop++; 
current.zIndex = zIndexTop; 

document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = drag; 
return false; 
} 
} 

if (isIE) { 
var obj = window.event.srcElement; 
if ((obj.parentElement != null) && 
(obj.parentElement.id.indexOf("test") != -1)) { 
current = obj.parentElement.style; 

dx = window.event.clientX - current.pixelLeft; 
dy = window.event.clientY - current.pixelTop; 

// Setze Objekt nach oben 
zIndexTop++; 
current.zIndex = zIndexTop; 

document.onmousemove = drag; 
return false; 
} 
} 

// Benutzer hat auf kein Objekt geklickt 
current = null; 
return false; 
} 

function drag(e) { 
if (current != null) { 
if (isNav4) { 
current.top = e.pageY - dy; 
current.left = e.pageX - dx; 
} 
if (isW3C) { 
current.top = parseInt(e.clientY) - dy; 
current.left = parseInt(e.clientX) - dx; 
} 
if (isIE) { 
current.pixelTop = window.event.clientY - dy; 
current.pixelLeft = window.event.clientX - dx; 
} 
} 

return false; 
} 

function endDrag(e) { 
if ((isNav4) || (isW3C)) { 
document.releaseEvents(Event.MOUSEMOVE); 
} 

document.onmousemove = null; 
current = null; 

return false; 
} 

</script> 

</head> 

<body onload="init()"> 

<div id="test1" style="position:absolute; left:50px; top:100px; width:120px; z-index:1;"><img src="kugel.gif"></div>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück