# Div in einem Div bewegen.



## FlorianR (15. Februar 2008)

*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


```
</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>
```


----------



## Paspirgilis (16. Februar 2008)

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


----------



## Sven Mintel (17. Februar 2008)

Moin,

schau mal hier herein: http://www.tutorials.de/forum/javascript-ajax/303663-dragndrop-scrollleisten.html

Dort findest du einen guten Ansatz für soetwas 
Damit das ganze dann nur innerhalb eines bestimmten Bereiches funktioniert, müsstest du eigentlich nur dem zu verschiebenden Layer als position "relative" zuweisen und dem Elternlayer eine feste Grösse und als overflow "hidden"


----------



## FlorianR (19. Februar 2008)

Hm, 

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


```
<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


----------



## Paspirgilis (19. Februar 2008)

```
<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


----------



## FlorianR (19. Februar 2008)

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 .


----------



## FlorianR (20. Februar 2008)

Eine Kleinigkeit(hoffe ich) scheint noch nicht zu funktionieren:


```
<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!


----------

