07-07-2011, 02:13 PM
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
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).
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)]