jquery draggable: comment limiter la zone déplaçable?

J’ai un object draggable (div) et quelques objects droppables (table TD). Je veux que l’utilisateur fasse glisser mon object déplaçable vers l’un de ces TD.

J’autorise draggable et droppable de cette façon:

$(".draggable").draggable(); $(".droppable").droppable();

Le problème est que l’utilisateur peut faire glisser le div n’importe où sur l’écran, y compris hors de la zone de repository.

Comment puis-je limiter la zone limite de l’object déplaçable?

Utilisez l’option “confinement”:

API de l’interface utilisateur jQuery – Widget Draggable – confinement

La documentation indique qu’elle accepte uniquement les valeurs: 'parent' , 'document' , 'window' , [x1, y1, x2, y2] mais je pense me souvenir qu’elle acceptera un sélecteur tel que ‘#container’.

 $(function() { $( "#draggable" ).draggable({ containment: "window" }); });

de ce code ne s’affiche pas. Code complet et démo: http://www.limitsizbilgi.com/div-tasima-surukle-birak-div-drag-and-drop-jquery.html

Afin de limiter l’élément à l’intérieur de son parent:

 $( "#draggable" ).draggable({ containment: "window" });

Voici un exemple de code à suivre. #thumbnail est un parent DIV de la DIV #handle

 buildDraggable = function() { $( "#handle" ).draggable({ containment: '#thumbnail', drag: function(event) { var top = $(this).position().top; var left = $(this).position().left; ICZoom.panImage(top, left); }, });

Voir l’extrait de la documentation officielle pour l’ option de containment :

endiguement

Par défaut: false

Contrainte de glisser dans les limites de l’élément ou de la région spécifiée.
Plusieurs types pris en charge:

Sélecteur : L’élément déplaçable sera contenu dans le cadre de sélection du premier élément trouvé par le sélecteur. Si aucun élément n’est trouvé, aucun confinement ne sera défini.

Elément : L’élément draggable sera contenu dans le cadre de sélection de cet élément.

Chaîne : Valeurs possibles: "parent" , "document" , "window" .

Tableau : Tableau définissant un cadre de sélection sous la forme [ x1, y1, x2, y2 ] .

Exemples de code:
Initialiser le draggable avec l’option de containment spécifiée:
 $( ".selector" ).draggable({ containment: "parent" }); 
Obtenir ou définir l’option de containment , après l’initialisation:
 // Getter var containment = $( ".selector" ).draggable( "option", "containment" ); // Setter $( ".selector" ).draggable( "option", "containment", "parent" ); 

 $(function () { $( ".droppable-area" ).sortable({ connectWith: ".connected-sortable", containment: ".droppable-area", //(parent div) stack: '.connected-sortable div' }).disableSelection(); });