faire glisser hors du corps html / div / tout

Question

je fais une classe d'éléments glissables comme ceci

jQuery(".drag").draggable();

jQuery(".drop").droppable({
accept: ".drag",

drop: function(ev, ui) {
//do stuff with dropped data

    }
});

Maintenant, le problème est que je suis capable de faire glisser les éléments hors du corps, et sur tout le code HTML. Comment puis-je limiter la zone dans laquelle il est draggable?

Answer 1

http://docs.jquery.com/UI/Draggable#option-containment

Contrainte de glisser dans les limites de l'élément ou de la région spécifié. Valeurs de chaîne possibles: 'parent', 'document', 'fenêtre', [x1, y1, x2, y2].

Exemple:

Initialisez un objet déplaçable avec l'option de confinement spécifiée.

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

Ou au cas où le problème serait que l'élément déplaçable puisse être placé partout:

http://docs.jquery.com/UI/Draggable#option-revert

Si défini sur true, l'élément reviendra à sa position de départ lors du glissement. Valeurs de chaîne possibles: 'valide', 'invalide'. Si la valeur est invalide, l'inversion ne se produira que si l'élément déplaçable n'a pas été déposé sur une liste de dépôt. Pour valide, c'est l'inverse.

Et enfin, je ne vous vois pas définir le périmètre du déplaçable ( Modifier ): cela ne résoudra pas votre problème, les 2 autres les choses ci-dessus devraient) :

http://docs.jquery.com/UI/Draggable#option-scope

Utilisé pour regrouper des ensembles d'éléments glissables et largables, en plus de l'option d'acceptation de droppable. Un objet déplaçable avec la même valeur d'étendue qu'un objet de dépôt sera accepté par celui-ci.

Exemple:

Initialiser un objet glissable avec l'option de portée spécifiée.

$('.selector').draggable({ scope: 'tasks' });