web-dev-qa-db-fra.com

jQuery draggable: comment limiter la zone draggable?

J'ai un objet glissable (div), et des objets droppables (table TD's). Je veux que l'utilisateur fasse glisser mon objet déplaçable vers l'un de ces TD superposables.

J'active draggable et droppable de cette façon:

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

Le problème est qu'avec cela, l'utilisateur peut faire glisser le div n'importe où sur l'écran, y compris hors de la zone de dépôt.

Comment puis-je limiter la zone de délimitation de l'objet déplaçable?

jquerydraggable
53
xus

Utilisez l'option "confinement":

API d'interface utilisateur jQuery - Widget déplaçable - confinement

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

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

de ce code n’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" });
13
Limitless isa

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

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

        ICZoom.panImage(top, left);
    },
});
9
mbokil
$(function () {
    $( ".droppable-area" ).sortable({
                connectWith: ".connected-sortable",
                containment: ".droppable-area", //(parent div)
                stack: '.connected-sortable div'
            }).disableSelection();
});
0
Rahul Ratnam

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

endiguement

Défaut:false 

Contraint le glissement dans les limites du .__ spécifié. élément ou région.
Types multiples supportés:

  • Selector: l'élément déplaçable sera contenu dans le cadre du premier élément trouvé par le sélecteur. Si aucun élément n'est trouvé, aucun confinement ne sera défini. 
  • Element: L'élément déplaçable sera contenu dans le cadre de sélection de cet élément.
  • String: valeurs possibles: "parent", "document", "window". 
  • Array: tableau définissant un cadre de sélection sous la forme [ x1, y1, x2, y2 ]. 

Exemples de code:
Initialisez le glissable avec l'option containment spécifiée:

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

Obtenez ou définissez l'option containment, après l'initialisation:

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );
0
naXa