web-dev-qa-db-fra.com

jQuery UI comment définir une option de confinement déplaçable sur le parent du parent

L'interaction jQuery UI Draggable a une propriété Nice pour définissant le confinement en tant que parent. 

$( ".selector" ).draggable({ containment: 'parent' });

Je souhaite définir le confinement en tant que parent du parent. Il n’existe pas de valeur de chaîne pour y parvenir. Les options de chaîne sont: 

'parent', 'document', 'fenêtre', [x1, y1, x2, y2]

Je pourrais calculer x1, y1, x2, y2 du parent du parent au chargement de la page et utiliser ces valeurs pour définir les limites d'un conteneur par rapport au document. Toutefois, la position du conteneur peut changer par rapport à la position parent du parent si la fenêtre est redimensionnée après le chargement de la page. L'option 'parent' native conserve l'élément déplaçable dans l'élément parent indépendamment du redimensionnement de la fenêtre.

Existe-t-il un moyen de réaliser ce confinement déplaçable en utilisant le parent du parent? .

jqueryjquery-uijquery-ui-draggable
14
steampowered

Selon l'option documentation , l'option containment peut également être un sélecteur jQuery ou un élément réel. Donc, vous pouvez faire ceci:

$('.selector').draggable({
    containment: $('.selector').parent().parent()
});

Ou encore mieux encore:

$('.selector').each(function(){
    $(this).draggable({
        containment: $(this).parent().parent()
    });
});
21
rossipedia

Selon la documentation, vous n'avez pas besoin de transmettre une chaîne pour la propriété containment. Vous pouvez transmettre n'importe lequel de:

Selector, Element, String, Array

Donc, il suffit de sélectionner le parent du parent avec jQuery (c'est-à-dire $( ".selector" ).parent().parent()), et de le transmettre au lieu de 'parent'.

4
wsanville

Si j'utilise $(this).parent() mon élément, passez sur l'élément parent.

$('.selector').draggable({
  containment: $(this).parent()
});

Mais avec parent cela fonctionne bien.

$('.selector').draggable({
  containment: "parent"
});
0
Druta Ruslan

Cela fonctionne bien aussi:

$('.selector').draggable({
    containment: "#parent",
    scroll: false
});
0
LABASTIE François