• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild per Klick mit Maus bewegen

F

Freigeist

Neues Mitglied
Hallo,

ich bin neu hier und hab gleich mal eine schwierige Frage.

Gibt es eine Möglichkeit eine Grafik von Punkt A nach Punkt B zu bewegen, wobei B durch einen Klick mit der Maus auf dem Bildschirm bestimmt wird?

Oder gibt es da vielleicht demo code, wäre echt schön, wenn mir da jemand helfen könnte

Gruß
Max
 
HTML: 
<body>
<img src="bild.png" alt="Bewegliches Bild" style="position:absolute;" id="bild" />
</body>
Javascript:
PHP: 
var drag = false;
document.getElementById("bild").onclick = function() {
  drag = true;
};
document.body.onclick = function(event) {
  if (drag) {
    var s = document.getElementById("bild").style;
    var coords = {};
    if (event.pageX) {
      coords.x = event.pageX;
      coords.y = event.pageY;
    } else if (event.clientX) {
      coords.x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      coords.y = event.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
    }
    s.top = coords.y + "px";
    s.left = coords.x + "px";
  }
  drag = false;
};

Ungetestet, müsste aber so funktionieren.
 
schon mal Danke für deine Antwort und deine Mühe, aber es scheint nicht zu gehen

Code: 
<html>
<head>
<title>JavaScript-Test</title>

<script type="text/javascript"> 
 var drag = false;
document.getElementById("bild").onclick = function() {
  drag = true;
};
document.body.onclick = function(event) {
  if (drag) {
    var s = document.getElementById("bild").style;
    var coords = {};
    if (event.pageX) {
      coords.x = event.pageX;
      coords.y = event.pageY;
    } else if (event.clientX) {
      coords.x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      coords.y = event.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
    }
    s.top = coords.y + "px";
    s.left = coords.x + "px";
  }
  drag = false;
};  
</script>

</head>

<body>
<img src="bild.png" alt="Bewegliches Bild" style="position:absolute;" id="bild" /></body>
</html>
 
Es funktioniert nicht, weil es im Head-Bereich ist, es muss am Ende des Bodys sein. Aber mir ist aufgefallen, dass beide Events zeitgleich ausgeführt werden.

HTML: 
<html>
<head>
<title>JavaScript-Test</title>



</head>

<body >
<img src="http://127.0.0.1/v2/images/icons/arrow_up.gif" alt="Bewegliches Bild" style="position:absolute;" id="bild" />
<script type="text/javascript"> 
var drag = false;
document.onclick = function(event) {
	var b = document.getElementById("bild");
	if (drag == "start") {
		drag = true;
	} else if (drag === true) {
		var coords = {};
		if (event.pageX) {
			coords.x = event.pageX;
		 	coords.y = event.pageY;
		} else if (event.clientX) {
			coords.x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
			coords.y = event.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
		}
		b.style.top = coords.y + "px";
		b.style.left = coords.x + "px";
		drag = false;
	}
};  
document.getElementById("bild").onclick = function() {
	drag = "start";
};

</script>
</body>
</html>
 
Freigeist schrieb:
schon mal Danke für deine Antwort und deine Mühe, aber es scheint nicht zu gehen
Zum Vergrößern anklicken....
Dann werfe mal einen Blick in die Fehlerkonsole. So ist das Skript fehlerhaft.

Aber ich würde ein Drag&Drop Skript suchen, da der Entwurf von Asterixus verbesserungswürdig ist und in manchen Situationen nicht funktioniert.
 
@struppi: Das mit dem Drag und Drop hatte ich auch als "sinnvoller" eingestuft, habe mir dann aber nochmal die Frage durchgelesen ^^ Der Entwurf ist nur im Firefox getestet. Wann funktioniert es denn nicht?
 
vergiss es, die Aussage kam von meiner falschen Annahme, dass es sich um eine Drag&Drop Variante handelt. Da hätte es das Problem gegeben, dass wenn du ein Bild dragst, es zu einer Überschneidung mit der Browserfunktion kommt, deshalb müssen die Events in dem Fall mit return false abgeschlossen und im Firefox preventDefault() aufgerufen, werden. Was aber hier unnötig ist. Also eine überflüssige Bemerkung ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben