jQuery .draggable() | In Bereich fixieren

02/01/2015 20:53 adistoe#1
Morgens

Also, ich habe ein Bild mit der Eigenschaft .draggable().
Das Bild lässt sich nun beliebig rumziehen, das ist auch (fast) gut so.

Das Problem ist, dass man das Bild nur so weit ziehen können soll, dass der Rand nicht innerhalb (ja, innerhalb!) des Bildschirms gelangen kann.

So sieht's aktuell aus:
[Only registered and activated users can see links. Click Here To Register...]

Nun soll das Bild nach unten rechts aber nur so weit gezogen werden können, dass das Blau nicht sichtbar wird. Das Bild soll also den Hintergrund immer komplett verdecken müssen.

Sobald es also so aussieht:
[Only registered and activated users can see links. Click Here To Register...]
soll das Bild am Rand hängen bleiben.


Ich hoffe ich konnte mich verständlich ausdrücken und danke schonmal für Hilfe :)

Mit freundlichen Grüssen
adistoe
02/01/2015 23:21 xEncounter#2
Stichwort containment.

Schau mal hier [Only registered and activated users can see links. Click Here To Register...]

[Only registered and activated users can see links. Click Here To Register...]

Code:
$( ".deinDing" ).draggable({
  containment: "document"
});
$( ".deinDing2" ).draggable({
  containment: "window"
});
Die Begrenzung wäre hier zum Beispiel das Dokument oder das Fenster.
02/02/2015 01:24 adistoe#3
Das Problem ist, dass ich die Begrenzung genau umgekehrt brauche^^

Wenn ich ein Fenster habe, will ich das Bild nur so weit in das Fenster hinein ziehen können, dass der Hintergrund nicht zum Vorschein kommt.
Bei deiner Lösung kann man das Bild nicht aus dem Fenster hinaus ziehen.

Ich habe es vielleicht etwas doof formuliert, aber mir fällt keine bessere Wortwahl dafür ein, tut mir Leid^^

Aber die Lösung geht auf jeden Fall in die richtige Richtung, danke :)
02/02/2015 04:59 .StarSplash#4
Du kannst für das Containment-Attribut auch ein Array mit Positionen übergeben, die dann das Rechteck darstellen, in dem du dein Bild rumziehen kannst. Dabei kannst du auch negative Werte und Werte außerhalb des Fensters übergeben und somit definieren, wie weit das Bild nach rechts unten über das Fenster hinaus verschoben werden darf. Das musst du dann so ausloten, dass die obere linke Ecke stets ausserhalb des Bildes bleibt.

Um das Ganze dynamisch anzupassen, kannst du die Berechnung mittels .resize() und .width() sowie .height() anstellen.
02/02/2015 11:47 adistoe#5
Ich werde das mal so versuchen, danke :)

#edit: Durch deinen Ansatz habe ich folgendes gefunden:
[Only registered and activated users can see links. Click Here To Register...]

Wenn ich das richtig verstanden habe, ist das genau das, was du meintest :)

Nun kann ich den Bildrand in der linken oberen Ecke nicht mehr in den Bildschirm ziehen, genau so wie ich das wollte.
In der rechten unteren Ecke muss dies allerdings auch noch verhindert werden, da man das Bild ja in jede Richtung ziehen kann und der Rand nirgendwo sichtbar werden darf.

Wie kann ich also das Containment für zwei Ecken gleichzeitig festlegen?

Code:
$('#myimg').draggable({ containment: [$(this).width,$(this).height,0,0] });
02/02/2015 16:19 .StarSplash#6
Ich hab das mal nachgebastelt: Ein Bild mit den Abmessungen 1024x768 wird zentriert in einem 800x600 Div geladen und kann darin verschoben werden, solange es das Div immer ganz ausfüllt:

[Only registered and activated users can see links. Click Here To Register...] Kannst dir den Source ja kopieren und damit weiter experimentieren.

PS: .width ist eine Funktion, da musst du die Klammern hinter setzen, auch wenn du keinen Parameter übergibst.
02/02/2015 17:11 adistoe#7
Genau der Punkt hat mir noch gefehlt, wie ich das genau mit dem 3. und 4. Wert anstelle (Bei mir hat da immer nur was rumgebuggt).

Danke für die schnelle Hilfe :D

#edit: .width() & .height() funktionieren bei mir nur ohne die Klammern und damit auch weiterhin nur eine Ecke :o

#edit 2:
Code:
$(function(){
	$('#myimg).draggable({ containment:
		[
			-(($(this).width() - $(#container').width())),
			-(($(this).height() - $('#container').height())),
			(($(this).width() - $('#container').width())),
			(($(this).height() - $('#container').height()))
		]
	});
});
Nun gut, jetzt lässt sich das ganze gar nicht mehr bewegen. Wenn ich allerdings jetzt mit den Zahlen hintendran rumspiele (@.StarSplash in deinem Beispiel 112 und 84), dann hüpft das Bild nur noch von Punkt zu Punkt :/
02/02/2015 22:43 .StarSplash#8
Die Zahlen sind der Ausgleich für die Margins, die ich gesetzt habe um das Bild zentriert im Div anzuzeigen, das könntest du im Prinzip weglassen oder anders berechnen. Hüpfen tut es, wenn es in einen Bereich geladen wird, indem es gar nicht verschoben werden darf, dann spring es an die X1 Y1 Position.

Dass bei dir die Funktionen ohne Klammern gehen und nicht mit wundert mich sehr :|

Wenn du magst, kannst du mir mal deinen kompletten Code schicken, inkl. dem Bild, dann kann ich das gerne machen.
02/02/2015 23:03 adistoe#9
Ich habe mittlerweile rausgefunden, dass ohne "function" um das Ganze halt width und height funktionieren und mit "function" width() und height().

Ich habe nun sozusagen genau deine Version nachgebastelt, allerdings kann man die Map damit nicht bewegen.

Ich würde es gerne selbst hinbekommen, aber vllt. komme ich doch noch auf dein Angebot zurück^^

So sieht die Funktion aus (falls das noch etwas hilft^^):
[Only registered and activated users can see links. Click Here To Register...]

Der "restliche Teil" der Funktion brabbelt eig. einfach das Bild zusammen^^
Dann wird es halt .draggable gemacht und ja, da tritt dann eben das obige Problem auf :)
02/02/2015 23:22 .StarSplash#10
Lässt die wirklich nichts bewegen, oder springt es nur an ne falsche Stelle? Setz statt den height und width mal große Werte ein.
02/02/2015 23:28 adistoe#11
Es lässt sich nichts bewegen.
Wenn ich grosse Werte setze, lässt sich das Ganze wieder bewegen, allerdings kann ich nach unten und nach rechts nicht mehr das komplette Bild ins Fenster ziehen und nach oben und nach links wieder beliebig weit ziehen.

(
-1000 - 1500,
-900 - 1200,
1000 - 1500,
900 - 1200
)
02/03/2015 00:54 .StarSplash#12
Naja in der Konstellation ist das schon logisch, du erlaubst ja gerade, bis -2500|-2100 nach oben links zu schieben, aber nur bis -500|-300 nach unten rechts, das kann ja nicht aufgehen ;O

Wenn du für die unteren Werte 2500|2000 einsetzt, wirst du es auch entsprechend weit nach unten rechts verschieben können.

Im Grunde ging es mir nur darum, zu wissen, ob der Teil überhaupt aufgerufen wird, oder die if-Abfrage das gar nicht erst zulässt.

Veränder die Werte solange, bis sie genau das tun, was du willst, benutz dafür ruhig absolute Werte. Wenn du die rausgefunden hast, kannst du dann immer noch überlegen, woraus sie sich berechnen.
02/03/2015 14:31 adistoe#13
Stimmt, entschuldige...
Wo hab ich nur meinen Kopf :o

Ich weiss nun auch, woran es liegt, dass man gar nichts bewegen kann.
Da Die Map per AJAX vorgeladen wird, werden die Werte nicht richtig verarbeitet.
Wenn ich zwischen dem Laden der Map und dem .draggable ein sinnloses Alert habe, funktioniert das Ganze (ausser einem kleinen Rand rechts und unten).