Drag & Drop - Element "weiterrutschen" lassen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
freezinger

freezinger hat kostenlosen Webspace.

23:17, 17.4.2011
Hey Leute,

ich arbeite gerade an einem Projekt, in dem ich ein großes Bild habe (größer als der Bildschirm des Users - so ne Art Spielkarte),
diese Bild kann der User mit Klick und Mausbewegen verschieben - jedoch möchte ich, wenn er auslässt, dass das Bild nicht apprupt stehen bleibt sonder schön langsam noch ein stück weiterrutscht. Am allerschönsten wärs natürlich, wenn das Bild weiter rutschen würde wenn der Benutzer das Bild schnell weg"schießt" (also die Maus schnell bewegt) und es nur ein kleines Stück weiterrutscht wenn er die Maus nur langsam bewegt.

Ich hoffe, das ist so halbwegs verständlich.

Kennt ihr irgendwelche bereits vorhandenen Bibliotheken, Klassen oder sonstiges die das können?
oder muss ich mir das selber zusammenbasteln?

Danke für eure Hilfe :D
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
creativeensemble

creativeensemble hat kostenlosen Webspace.

12:45, 18.4.2011
freezinger

Ich würde mal schauen das du es dir selbst zusammen bastelst weil es gibt nicht grad viele die es machen weil die es nicht gut finden aber wen du noch nichts angefangen hast geschweige schon fertiges gefunden hast könnte ich mich mal hinsetzten und was das machen
drafed-map

drafed-map hat kostenlosen Webspace.

13:11, 18.4.2011
Du schreibst dir eine Funktion, die du mit window.setInterval() sehr häufig aufrufen lässt, und die die aktuelle Bewegung bremst. Dann schreibst du dir eine Funktion, die die Mausposition überwacht. In dieser Funktion musst du prüfen, ob die linke Maustaste gedrückt ist, oder nicht. Ist sie gedrückt, kommt eine weitere Bedingung. Wenn die Maus innerhalb einer kurzen Zeitspanne zu viele Pixel weit bewegt wurde, setzt du die Bewegung auf ein hohes Maß. Ist sie aber im Rahmen bewegt worden, verschiebst du die Karte um so viel, wie sich die Mausposition verändert hat.
Autor dieses Themas
freezinger

freezinger hat kostenlosen Webspace.

15:08, 18.4.2011
Hab mittlerweile zumindest Ansätze gefunden, die werde ich jtz einfach ausbauen.

Falls dennoch jemand etwas fix und fertiges hat, wäre ich sehr dankbar wenn derjenige sich bei mir melden würde.

23:05, 18.4.2011

Ich gebe offen zu, dass ich JS nicht beherrsche, aber ich habs dennoch versucht. Es funktioniert sogar, sogar sehr ordentlich.

Funktionen:
- Anzeige der Position.
- Veränderung der x- und y-Koordinaten durch normales Bewegen.
- Inbewegungsetzung durch heftiges Bewegen der Maus (Geschwindigkeit hängt von Bewegungsgeschwindigkeit der Maus und der Zeit, wie lange die Maustaste gedrückt war, ab).
- Ausrollen der Bewegung nach einiger Zeit (umso höher die Geschwindigkeit, desto länger braucht das Ausrollen).
- Abruptes Abbremsen der Karte beim Drücken der Maus, damit der User die Karte nicht zwangsweise ausrollen lassen muss.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Map 0.1</title>
		<script type="text/javascript">
		document.onmousedown = startScrolling;
		document.onmouseup = stopScrolling;
		document.onmousemove = scroll;
		
		var x = 0;
		var y = 0;
		var scrolling = false;
		var permanentlyScrolled = false;
		var oldMousePosX;
		var oldMousePosY;
		var slideX = 0;
		var slideY = 0;
		var xSinceStart = 0;
		var ySinceStart = 0;
		var timeSinceStart = 0;
		
		function startScrolling()
		{
			scrolling = true;
			timeSinceStart = 0;
			xSinceStart = 0;
			ySinceStart = 0;
		}

		function stopScrolling()
		{
			scrolling = false;
			permanentlyScrolled = false;
			
			if(((xSinceStart / timeSinceStart) > 300) || ((xSinceStart / timeSinceStart) < -300))
			{
				slideX = Math.round((xSinceStart / timeSinceStart) / 30);
			}
			
			if(((ySinceStart / timeSinceStart) > 300) || ((ySinceStart / timeSinceStart) < -300))
			{
				slideY = Math.round((ySinceStart / timeSinceStart) / 30);
			}
		}
		
		function scroll(e)
		{
			if(scrolling)
			{
				var posx = document.all ? window.event.clientX : e.pageX;
				var posy = document.all ? window.event.clientY : e.pageY;
				
				if(permanentlyScrolled == false)
				{
					permanentlyScrolled = true;
					oldMousePosX = posx;
					oldMousePosY = posy;
				}
				
				if(oldMousePosX != posx)
				{
					x = x + posx - oldMousePosX;
					xSinceStart = xSinceStart + posx - oldMousePosX;
					oldMousePosX = posx;
					document.getElementById('x').innerHTML = 'x: ' + x;
				}
				
				if(oldMousePosY != posy)
				{
					y = y + posy - oldMousePosY;
					ySinceStart = ySinceStart + posy - oldMousePosY;
					oldMousePosY = posy;
					document.getElementById('y').innerHTML = 'y: ' + y;
				}
			}
		}
		
		function slide()
		{
			if(slideX != 0)
			{
				x = x + slideX;
				document.getElementById('x').innerHTML = 'x: ' + x;
				
				if(slideX > 0)
				{
					slideX--;
				} else
				{
					slideX++;
				}
			}
			
			if(slideY != 0)
			{
				y = y + slideY;
				document.getElementById('y').innerHTML = 'y: ' + y;
				
				if(slideY > 0)
				{
					slideY--;
				} else
				{
					slideY++;
				}
			}
		}
		
		function runTime()
		{
			timeSinceStart = timeSinceStart + 0.1;
		}
		</script>
	</head>
	<body onload="window.setInterval('slide()', 100); window.setInterval('runTime()', 100);">
		<div id="x">x: </div>
		<div id="y">y: </div>
	</body>
</html>

Autor dieses Themas
freezinger

freezinger hat kostenlosen Webspace.

1:39, 19.4.2011
@drafed-map: gerade probiert, bei mir stopt es nicht mehr wenn ich mit mittlere/schneller geschwindikeit den Mauszeiger bewege.
programtools

programtools hat kostenlosen Webspace.
9:42, 19.4.2011
Also zuerst einmal eine Frage. Kennst du dich mit Javascript überhaupt ansatzweise aus? Denn drafed-map, der sich selbst als jemand der von js nur grob Ahnung hat bezeichnet, hat dir da einen super Ansatz geliefert. Um das ganze zu verstehen oder mal etwas rein zu kommen, könntest du dir auf HTML-World http://www.html-world.de/program/js_ov.php Mal die Grundlagen zu JS anlesen. Damit solltest du dann bei weitem In der Lage sein die Funktion auszubessern und das beste Ist die Lektüre des Tuts dauert auch nicht Wochen, sondern für programmiererfarene vielleicht einen Samstag und noch den Sonntag zum Testen des neuen Wissens.

Zu dem Script von drafed-map, soweit ich jetzt sehen kann ist eine Stop funktion garnicht vorhanden? Bzw Der gesetzte Wert wird durch die noch laufende Function sofort wieder überschrieben und die Karte läuft trotzdem weiter.

Wenn dein Problem jetzt nicht das JS sein sollte, sondern du nicht weisst wie du vorgehen sollst, dann würde ich raten ein Block und einen Stift zur Hand zu nehmen und die Struktur und den Aufbau durchdenken.

Das Verschieben des Bildes startet beim Mausdrücken (onmousedown), die x und y coordinaten werden beim Verschieben der Maus (mousemove) ermittelt und gesetzt und der ganze Vorgang wird mit dem Loslassen der Maus (onmouseup) beendet.

Für den Stop brauchen wir ein weiteres Event. Er soll ausgeführt werden, wenn der Benutzer mit der Maus klickt also onclick im Body.

Also erstellen wir eine weitere Funktion:
```
function stopsliding(){

}
```
Die Funktion rufen wir im Body auf
```
<body onclick="stopsliding();" ...>
```
Was genau soll die Funktion machen?
Den scroll-vorgang stoppen - genauer den slidevorgang, da der scrollvorgang ja durch loslassen der Maus beendet wird und nur das sliden automatisch und ohne späteren Einfluss geschieht. Also schauen wir, wo denn 'geslidet' wird.
```
function slide(){
		  if(sliding){    // Hier wird die Variable sliding geprüft (siehe unten)
			if(slideX != 0){
				x = x + slideX;
				document.getElementById('x').innerHTML = 'x: ' + x;
                                // Hier wird für X  'geslidet'

				if(slideX > 0){
					slideX--;
				}else{
					slideX++;
				}
		  }

			if(slideY != 0){
				y = y + slideY;
				document.getElementById('y').innerHTML = 'y: ' + y;
    			        // Hier wird für Y  'geslidet'

				if(slideY > 0){
					slideY--;
				}else{
					slideY++;
				}
			}
		  }
		}
```
Der Slide-vorgang findet also in der Funktion 'slide()' statt. Also müssen wir ihn dort zu gg Zeit unterbinden undzwar nach dem Klick des Users. Dazu machen wir eine neue Variable am Anfang des Scriptes
```
var sliding = false;
```
Und in der Funktion fragen wir ab, ob die Variable sliding denn true ist, da sonst garnix geslidet wird:
```
function slide(){
		  if(sliding){    // Hier wird die Variable sliding geprüft 
                           //[...] Hier wird 'geslidet' aber nur wenn slideing = true      
		  }
		}
```
So wann setzen Wir die Variable nun auf true und wann auf false?
false ist ganz klar, nämlich in unserer Funktion stopsliding().
Ergänzen wir hier also ein 'sliding = false'.

Auf true müssen wir die Variable stellen, wenn der Vorgang des slidens beginnt. Das ist nach dem Beenden des Verschieben, und somit im 'onmouseup' event des documents.
```
function stopScrolling(){
			scrolling = false;
			permanentlyScrolled = false;

			if(((xSinceStart / timeSinceStart) > 300) || ((xSinceStart / timeSinceStart) < -300)){
				slideX = Math.round((xSinceStart / timeSinceStart) / 30);
		        sliding = true;   //setze sliding auf true, da hier der Slidevorgang beginnt
		        stopavtmp = new Date().getTime();   //speichere Zeitpunkt des Setzens von 'sliding'
        	}

			if(((ySinceStart / timeSinceStart) > 300) || ((ySinceStart / timeSinceStart) < -300)){
				slideY = Math.round((ySinceStart / timeSinceStart) / 30);
				sliding = true;   //setze sliding auf true, da hier der Slidevorgang beginnt
				stopavtmp = new Date().getTime();  //speichere Zeitpunkt des Setzens von 'sliding'
			}
		}
```
Nun wird die Variable zu gg Zeit auch auf true gesetzt. Allerdings haben wir noch ein Problem, und zwar implementiert der Browser die mouseup, (mousemove), mousedown Prozedur auch als ein 'onclick' event im Body. Somit würde ja direkt nach dem Verschieben und dem setzen von 'sliding = true' und somit der Beginn des Slidevorganges der Slidevorgang wieder gestoppt werden, da 'sliding' durch die Funktion stopsliding() die ja im Onclickevent aufgerufen wird sofort wieder auf false gesetzt wird. Daher speichern wir die Zeit beim slide-beginn und fragen diese beim slidestop versuch ab.

die slidestop funktion sähe dann so aus:
```
function stopsliding(){
		var time = new Date();
		  if(sliding && (stopavtmp + 3) < time.getTime()){
                sliding = false

            }
        }
```
Die Variable 'stopavtmp' müssen wir ebenfalls am Beginn des Scriptes mit var stopavtmp = 0; deklarieren.

Damit hätten wir auch eine Stopfunktion erfolgreich eingebaut.

Ich hoffe du konntest alles nachvollziehen und dass es bei dir gut läuft.
Viel Erfolg,
programtools
drafed-map

drafed-map hat kostenlosen Webspace.
10:09, 19.4.2011

freezinger schrieb:
@drafed-map: gerade probiert, bei mir stopt es nicht mehr wenn ich mit mittlere/schneller geschwindikeit den Mauszeiger bewege.

Dann darfst du es nicht ganz so hektisch machen und musst die Abbremsung etwas stärker einstellen. Irgendwann stoppt es aber immer . Oder wenn du so hektisch mit der Maus arbeitest, dann mache das sliden langsamer. Dazu musst du die 30 in Zeile 38 und 43 durch eine höhere Zahl ersetzen.

Edit: Ich habe es gerade geprüft und bei mir hört es wieder auf. Klick.

Das Sliden hört automatisch auf, wenn slideX und slideY gleich 0 sind. Damit es beim Klicken aufhört, braucht man kein neues Event; Es genügt, wenn man diesen Code in die Funktion startScrolling() einfügt:
```
slideX = 0;
slideY = 0;
```
Beitrag zuletzt geändert: 19.4.2011 10:24:09 von drafed-map
programtools

programtools hat kostenlosen Webspace.

10:31, 19.4.2011
Ja da hast du allerdings recht. Der Eintrag im Start scrolling erfüllt das sofortige stoppen, allerdings sollte meine Version nur einmal den Logischen Vorgang und Aufbau veranschaulichen und ich habe gedacht, wenn er nun möchte, dass es beim Klicken nicht sofort stoppt sondern nur innerhalb der nächsten 13 px bremst, also noch slidet aber den slide eben stark abbremst, dann ist das so nochmal individuell einstellbar und vielseitiger als im startscrolling für x und y eine 13 anzugeben.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city