+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][jQuery] Problème containment div draggable (/showthread.php?tid=5533)
[Résolu][jQuery] Problème containment div draggable - Argorate - 06-07-2011
Hello,
je viens de constater un petit soucis avec l'option de jquery "containment" sur mes pop up draggable, auquel j'ai attribué l'option : containment: 'body'.
Le problème survient lorsque la pop up est plus grande que la page de base.
Si on drag la fenetre, cela fonctionne, mais le haut de la pop up sort de l'écran vers le haut.
L'embetant étant que mes pop up ne sont attrapable que sur le titre de celle-ci, qui se trouve précisément tout en haut de la pop up. Du coup cela bloque, on ne peut plus ni bouger ni fermer la fenetre...
C'est assez contraignant, es-ce deja arrivé à qqun d'autre?
Avez-vous une solution à me proposer?
Merci.
RE: Probleme containment div draggable avec jquery - Ter Rowan - 06-07-2011
je dirais :
- forcer la popup a être plus petite
ou/et
- empêcher le haut de la popup de sortir de sa zone (je sais pas si jquery le propose, sinon en javascript manuel avec les positions du curseur au début et lors des mouvements)
ou/et
- lorsque une popup a le focus, la déplacer pour qu'à minima le haut de la popup apparaisse
RE: Probleme containment div draggable avec jquery - Argorate - 06-07-2011
Eheh, en te lisant ça m'a donné une idée!
Je pense qu'il me suffit de verifier sur l'event drop : if(haut_de_la_pop_up pas visible) bouge la pop up comme il faut.
Reste a trouver comment chopper l'event en question
EDIT:
$( ".selector" ).draggable({
stop: function(event, ui) { ... }
});
Je vais tenter ça tien merci
EDIT2: C'est bon ça marche, c'est cool
Merci, rien que le fait d'en parler a qqun ça suffit, comme quoi c'est pas toujours bien d'etre seul sur un projet ^^
RE: [REGLE]Probleme containment div draggable avec jquery - Bertrand - 06-07-2011
J'aurai répondu la même chose que Ter Rowan, mais en insistant + sur le 1er point.
Du point de vue de l'ergonomie, ça me parait bizarre qu'une popup soit + grande que la fenêtre (ou éventuellement si l'utilisateur s'amuse à la redimensionner).
Indépendamment de çà j'ai utiliser draggable pas plus tard qu'hier et j'ai eu le pb inverse. L'objet draggable refusait de sortir de son div parent, alors que je voulais le contraindre à la fenêtre globale. J'ai essayer les valeurs body, window, document, un sélecteur avec l'id affecté à la balise body, rien à faire. J'ai résolu le pb en utilisant un autre attribut de draggable : "appendTo". Suite à ton message, je viens de virer l'attribut "containment" et j'obtiens le même comportement que toi (mon objet peut sortir de la fenêtre). J'en déduis qu'il faut utiliser les 2.
RE: [Résolu] Problème containment div draggable avec jQuery - Argorate - 07-07-2011
Je n'ai pas bien saisie la nuance entre les 2 options (appendTo et containment), tu peux m'en dire plus?
En tout cas j'ai réglés mon pb autrement pour l'instant.
RE: [Résolu] Problème containment div draggable avec jQuery - Bertrand - 07-07-2011
Comme ça me laissait perplexe, j'ai approfondi ce matin.
Par défaut l'élément draggable reste attaché à son parent "naturel", l'attribut appendTo sert à le changer. Dans la pratique, ça n'est utile que si le parent naturel (ou l'un de ses parents en remontant jusqu'à la racine) a son overflow != visible. Si l'overflow est hidden ou scroll, ça "masque" la contrainte que l'on veut imposer (soit l'élément devint invisible, soit ça scrolle à mort
). C'était mon cas, et j'ai donc du définir cet attribut. Dans le tien, ça ne changera à priori rien (contrairement à ce que je pensais hier).Et l'attribut containment définit bien la contrainte de déplacement.
J'ai l'impression que l'attribut helper, quand il est positionné à 'clone' a aussi un petit effet, comme si ça introduisait un décalage de coordonnées sur l'élément draggable.
Dans ton cas, le pb vient uniquement de la taille de ton popup, et l'api doit faire un choix (même si c'est pas terrible de déborder en haut de l'écran). Par rapport aux solutions qui t'ont été proposés, j'en aurai une autre : utiliser la syntaxe [x1, y1, x2, y2]. Quelque chose du genre
Code :
containment:[0, 0, max(window.innerWidth, popup.width), max(window.innerHeight,popup.height)]