jquery draggable : comment limiter la zone de draguage ?

Question

J'ai un objet pouvant être déplacé (div), et d'autres pouvant être déposés (tables TD). Je veux que l'utilisateur fasse glisser mon objet glissant vers l'un de ces TD déposables.

J'active les fonctions "dragable" et "droppable" de cette façon :

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

Le problème est qu'avec cette méthode, l'utilisateur peut faire glisser la division n'importe où sur l'écran, y compris en dehors de la zone de dépôt.

Comment puis-je limiter la zone de délimitation de l'objet glissant ?

Answer 1

Utilisez l'option "confinement" :

jQuery UI API - Widget Draggable - confinement

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

Answer 2

$(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" });

Answer 3

Voici un exemple de code à suivre. #thumbnail est un DIV parent du 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);
    },
});

Answer 4

Voir l'extrait de la documentation officielle de containment option :

confinement

Par défaut : false

Limite le déplacement à l'intérieur des limites de l'élément ou de la région spécifié(e). élément ou de la région.
Plusieurs types sont pris en charge :

• Sélecteur : L'élément glissable sera contenu dans la boîte englobante du premier élément trouvé par le sélecteur. Si aucun élément n'est trouvé, aucun confinement ne sera défini.
• Élément : L'élément glissant sera contenu dans la boîte de délimitation de cet élément.
• Chaîne de caractères : Valeurs possibles : "parent" , "document" , "window" .
• Array : Un tableau définissant une boîte de délimitation sous la forme [ x1, y1, x2, y2 ] .

Exemples de codes :
Initialiser le draggable avec l'élément containment spécifiée :

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

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

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

Answer 5

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