[Résolu][jQuery] Problème containment div draggable

[Argorate]

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.

[Ter Rowan]

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

[Argorate]

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 ^^

[Bertrand]

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.

[Argorate]

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.

[Bertrand]

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)]

Après, tu adaptes (utiliser les dimensions de body plutôt que de window, rajouter des marges ...). Mais ça n'apporte pas grand chose par rapport à la solution que tu as déjà mis en œuvre (avec des marges suffisantes, ça rajoute un peu de liberté de déplacement, et ça peut donner un peu plus de visibilité sur le reste de la page).