|
You last visited: Today at 06:41
Advertisement
jQuery .draggable() | In Bereich fixieren
Discussion on jQuery .draggable() | In Bereich fixieren within the Web Development forum part of the Coders Den category.
02/01/2015, 20:53
|
#1
|
elite*gold: 63
Join Date: Oct 2012
Posts: 1,181
Received Thanks: 139
|
jQuery .draggable() | In Bereich fixieren
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:
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:
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
|
#2
|
elite*gold: 22
Join Date: Nov 2009
Posts: 1,552
Received Thanks: 361
|
Stichwort containment.
Schau mal hier
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
|
#3
|
elite*gold: 63
Join Date: Oct 2012
Posts: 1,181
Received Thanks: 139
|
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
|
#4
|
elite*gold: 74
Join Date: Jul 2010
Posts: 13,408
Received Thanks: 3,943
|
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
|
#5
|
elite*gold: 63
Join Date: Oct 2012
Posts: 1,181
Received Thanks: 139
|
Ich werde das mal so versuchen, danke
#edit: Durch deinen Ansatz habe ich folgendes gefunden:
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
|
#6
|
elite*gold: 74
Join Date: Jul 2010
Posts: 13,408
Received Thanks: 3,943
|
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:
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
|
#7
|
elite*gold: 63
Join Date: Oct 2012
Posts: 1,181
Received Thanks: 139
|
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
#edit: .width() & .height() funktionieren bei mir nur ohne die Klammern und damit auch weiterhin nur eine Ecke
#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
|
#8
|
elite*gold: 74
Join Date: Jul 2010
Posts: 13,408
Received Thanks: 3,943
|
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
|
#9
|
elite*gold: 63
Join Date: Oct 2012
Posts: 1,181
Received Thanks: 139
|
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^^):
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
|
#10
|
elite*gold: 74
Join Date: Jul 2010
Posts: 13,408
Received Thanks: 3,943
|
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
|
#11
|
elite*gold: 63
Join Date: Oct 2012
Posts: 1,181
Received Thanks: 139
|
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
|
#12
|
elite*gold: 74
Join Date: Jul 2010
Posts: 13,408
Received Thanks: 3,943
|
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
|
#13
|
elite*gold: 63
Join Date: Oct 2012
Posts: 1,181
Received Thanks: 139
|
Stimmt, entschuldige...
Wo hab ich nur meinen Kopf
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).
|
|
|
|
Similar Threads
|
[EasyGuide]Draggable Graphical User Interface(FormBorederStyle= None).
06/04/2014 - CO2 Programming - 9 Replies
Hello fella just wanna share how to make a draggable GUI and fit your image..
Things needed:
*Your desired image.
*Photoshop or Paint.net(Paint.net).. - Edit your image make sure to remove the background.(some image has white background color) I uses paint.net to remove it.
*VisualStudio
Instructions:
|
[jQuery] Simple jQuery-Plugin Template
01/21/2014 - Coding Snippets - 0 Replies
Ohne Parameter:
Der Code selbst:
(function( $ ) {
$.fn.popupContent = function() {
//Funtions-Block
alert($( this ).text());
};
}( jQuery ));
|
[777 LastChaos Delum ]Mage Im Bereich 105-110 & Hunter Im Bereich 95-100 !![Aktion]
01/25/2011 - Last Chaos Trading - 3 Replies
Hey Leute ,
Ich Verkaufe wie Schon Oben Beschrieben Beide Char´s ,
auf Den Selben Account =)
So Kurz Und Knapp Beschrieben was alles Drauf ist auf beiden =)
Magierin =) :
Rüstung & Waffen :
97+15 y4
|
Npc fixieren
10/27/2010 - Metin2 Private Server - 5 Replies
Hallöchen liebe community,
Und zwar hab ich mir neue npc erstellt und würde die gerne auf den maps fixieren.
Wie stelle ich das an bzw. wo muss ich da rein??
Bzw. wo kann ich preise ändern. ?
lg
|
All times are GMT +2. The time now is 06:41.
|
|