La restriction de la déplaçable zone de jQuery UI
Je suis en train de créer un déplaçables à la souris la zone à l'intérieur d'un div. Il fonctionne très bien mais je ne veux pas que l'espace blanc à l'extérieur de selection de la zone et par conséquent, ils veulent à la limite de la zone qui peut être déplacé. Ce que je suis venu jusqu'ici est ici, dans ce violon.
L'image est d'abord positionné en haut à gauche de la div parent. Si vous le faites glisser vers la droite ou en bas, vous pouvez voir l'espace blanc, que je ne préfère pas. Comment puis-je limiter ce?
Je pense que cela peut être fait à l'aide de l'enceinte de Confinement paramètre dans Déplaçable cas de jQuery UI à l'aide de
$( ".selector" ).draggable({ containment: "" });
Mais je ne suis pas en mesure de comprendre comment. Aussi, si la page entière est un seul élément déplaçable (quelque chose de similaire à Google Maps), comment puis-je limite?
Dans ce cas, le glissement ne devraient tout simplement pas se produire du tout.
OriginalL'auteur Gautam Krishnan | 2013-06-08
Vous devez vous connecter pour publier un commentaire.
Vous pouvez le faire par l'habillage de l'image dans un div conteneur qui est deux fois plus grand que l'image, moins la widnow div de taille, et de compenser par la taille de la plage div. Que et le confinement de l'option et vous devriez être tous ensemble.
jsFiddle exemple
HTML
JS
CSS
L'image ci-dessous devrait vous donner une idée de la taille du récipient par rapport à l'image et la fenêtre d'affichage. La fenêtre d'affichage est la plus petite place dans le milieu de l'image avec une bordure noire et le wrapper est le plus grand rectangle. Vous pouvez voir l'image comme étant déplacé vers les positions extrêmes.
Essentiellement, vous aurez toujours besoin de faire est de créer un emballage ou un contenant qui est le double de la taille de l'image, moins la largeur/hauteur de la fenêtre d'affichage. Que wrapper doit ensuite être décalé sur la gauche et le haut, alors que l'image est décalée à l'opposé de façon à ce qu'il commence dans la bonne position.
En fait, cela a fonctionné plutôt bien! Merci. J'ai dû faire quelques ajustements pour laisser de la marge autour de la "carte du jeu" je suis en train de faire, mais, même concept. Génial! Je vous remercie.
OriginalL'auteur j08691