Div in einem Div bewegen.

FlorianR

FlorianR

Erfahrenes Mitglied
Div Element bewegen (der Maus nach).

Hallo Zusammen,

ich arbeite gerade an einem kleinen Script, an dem ich nun nicht weiter komme.
Ich möchte ein kleines Div haben, welches sich der Maus hinterher bewegt (spät nur per klick). Unten seht ihr mein versuch, aber irgendwas stimmt noch nicht.

Habt ihr eine Idee?

Gruß,
Florian

PHP: 
</head>
<script type="text/javascript">
	/* Koordinaten */
	var y; 
	var x;
	var aktuellePositionX = 0;
	var aktuellePositionY = 0;
	
	function mausPosition(evt){
		var evt;
		(window.event)
    	if (navigator.appName == "Microsoft Internet Explorer"){
			evt = ('top:'+window.event.clientX+'\nleft:'+window.event.clientY)
		}else{
    		evt = ('top:'+evt.pageX+'\nleft:'+evt.pageY);
		}
		return evt;
	}
	
	function bewegen(){
		alert("drinn");
		/* Das zu bewegende Objekt */
		var objekt = document.getElementById("held");
		
		/* Koordinaten zuweisen */
		evt = window.event;
  		var p = mausPosition(evt);
		x = p.left;
		y = p.top;
		
		/* Bewegen */
		objekt.style.left = aktuellePositionX + 'px';
		objekt.style.top = aktuellePositionY + 'px';
		
		aktuellePositionX = aktuellePositionX+1;
		aktuellePositionY = aktuellePositionY+1;
		
		if(aktuellePositionX < x && aktuellePositionY < y){
			window.setTimeout('bewegen()',25);
		}
	}
	/*document.getElementById("spielFeld").onclick = bewegen;*/
	window.onload = bewegen;
</script> 
<body>
<div id="spielFeld">
	<div id="held">
		Held.
	</div>
</div>
</body>
 
Zuletzt bearbeitet:
Hab einige Ideen aber keine Lust jetzt alles genau auszuarbeiten.
Wenn sich bis morgen abend keiner gemeldet hat kannst mich über email anschreiben oder skype oder icq dann mach ich das gerne für dich muss morgen früh hoch.
Gruß Mark Paspirgilis

email: Mark-Paspirgilis@web.de
skype: Fichte1988
Icq: 315703396
 
Hm,

also so ganz habe ich das noch nicht raus...

PHP: 
<script type="text/javascript">
	/* Koordinaten */
	var y; 
	var x;
	var aktuellePositionX = 0;
	var aktuellePositionY = 0;
		
	function bewegen(){
		/* Das zu bewegende Objekt */
		var objekt = document.getElementById("held");
		
		/* Koordinaten zuweisen */
		x = document.all ? window.event.clientX : src.pageX;
		y = document.all ? window.event.clientX : src.pageY;
		
		/* Bewegen */
		objekt.style.left = aktuellePositionX + 'px';
		objekt.style.top = aktuellePositionY + 'px';
		
		aktuellePositionX = aktuellePositionX+1;
		aktuellePositionY = aktuellePositionY+1;
		
		if(aktuellePositionX < x && aktuellePositionY < y){
			window.setTimeout('bewegen()',25);
		}
	}
	/*document.getElementById("spielFeld").onclick = bewegen;*/
	window.onload = bewegen;
</script> 
<body>
<div id="spielFeld" onclick="bewegen()">
	<div id="held">
		Held.
	</div>
</div>

Die Fehlermeldung sagt, dass ein Objekt fehlt, bzw er nichts mit dem Objekt anfangen kann. Ich bin mir auch sicher das etwas fehlt (offensichtlich ;-)). Aber ich komme irgendwie nicht weiter.

Und... ist das die MS / NS Abfrage: x = document.all ? window.event.clientX : src.pageX ?
also sprich, erst der MS und dann alles andere?

Gruß,
Florian
 
PHP: 
<html>
<head>
	<style type="text/css">
		#held
			{
			position: fixed;
			left: 10px;
			top: 10px;
			}
	</style>
	<script Language="JavaScript">
		function asdf()
			{
			erlauben=0;
			}
		function erlaubnis(e)
			{
			if(erlauben==1)
				{
				erlauben=0;
				}
			else
				{
				erlauben=1;
				x = e.pageX || window.event.x;
				y = e.pageY || window.event.y;
				document.getElementById("held").style.left=x;
				document.getElementById("held").style.top=y;
				}
			}
		function start(e)
			{
			if(erlauben==1)
				{
				x = e.pageX || window.event.x;
				y = e.pageY || window.event.y;
				document.getElementById("held").style.left=x;
				document.getElementById("held").style.top=y;
				}
			}
	</script>
</head>
<body onload="asdf()" onmousemove="start(event)" onmousedown="erlaubnis(event)">
	<div id="spielFeld">
		<div id="held">
			Held
		</div>
	</div>
</body>
</html>


Hoffe das ist so wie du es dir gedacht hast ;)

Hat mich Zwei Stunden gekostet.
Entschuldigung das ich alles umgebaut hab.
Nimm dir einfach das raus was du brauchst.

Jetzt ist mein Morgen futsch.
Da is jetzt aber n Dankeschön angebracht(falls alles so funktioniert wie du es dir gedacht hast.).

MFG Mark Paspirgilis
 
Ich denke das hilft mir schon sehr gut weiter!

Würde Dir ja ein Bier ausgeben, wenn Du hier Wohnen würdest... aber vllt. reicht ja auch ein Danke schön :).
 
Eine Kleinigkeit(hoffe ich) scheint noch nicht zu funktionieren:

PHP: 
<script type="text/javascript">
	var aktuellePositionX = 0;
	var aktuellePositionY = 0;
	
	// Lässt die Erlaubnis löschen (z.B. Figur darf sich nicht bewegen) - wird beim Start geladen
	var check = 0;
	
	function bewegen(e,check){
	// Diese Funktion lässt eine Figur bewegen

		// check = 1; - Erlaubt es der Figur sich zu bewegen
		if(check == 0){
			var check = 1;
		}
		
		// Weise die Mauskoordinaten zu (beim Klick)
		x = e.pageX || window.event.x;
        y = e.pageY || window.event.y;
		
		// Das zu bewegende Objekt
		var figur = document.getElementById("held");

			while(check == 1 && aktuellePositionX < x && aktuellePositionY < y) {
				setTimeout(figur.style.left = aktuellePositionX-25+"px", 25);
				setTimeout(figur.style.top = aktuellePositionY-25+"px", 25);
				aktuellePositionX = aktuellePositionX+1;
				aktuellePositionY = aktuellePositionY+1;
			}
		// Berechtigung zurücksetzen:
		check = 0;
	}
</script> 
<body>
<div id="spielFeld" onclick="bewegen(event,check)">
	<div id="held">
		Held.
	</div>
</div>

Er sagt mir "missing;before statement".
Habt ihr eine Ahnung wieso?

Zur Info: Ich möchte, dass sich "Div "Held"" zur gewünschten position "hinschiebt".

Ich hoffe ihr könnt mir helfen!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück