Comment désactiver un glisser-déposer jquery-ui?

99

Comment désactiver un jQuery déplaçable, par exemple pendant une publication UpdatePanel?

jquery-ui

— ErnieStings
source

148

Peut créer une fonction DisableDrag (myObject) et EnableDrag (myObject)

myObject.draggable( 'disable' )

ensuite

myObject.draggable( 'enable' )

— couleur folle
source

2

Cela marche. La documentation complète pour draggable () est ici . Il en va de même pour les objets sortables () (si vous autorisez la réorganisation par glisser-déposer.)

— nickb

3

Ce qui veut dire que les documents draggable () sont (maintenant?) Ici , avec le lien de nickb, ci-dessus, allant à la démo . ;)

— ruffin

Cela me donne "impossible d'appeler des méthodes sur glissables avant l'initialisation; j'ai tenté d'appeler la méthode 'disable'"

— Haseeb Zulfiqar

Mian Haseeb: Voir ça: stackoverflow.com/questions/14955630/…

— madcolor

69

Pour désactiver temporairement le comportement déplaçable, utilisez:

$('#item-id').draggable( "disable" )

Pour supprimer définitivement le comportement déplaçable, utilisez:

$('#item-id').draggable( "destroy" )

— PhilB
source

6

J'ai trouvé que «désactiver» a un effet secondaire lié au CSS, mais détruire fonctionne parfaitement.

— Niels Brinch

1

@jedanput l'effet secondaire de l'utilisation de disable est que les éléments déplaçables ont une apparence grisée. détruire semble laisser l'apparence tranquille.

— samazi

19

Pour activer / désactiver le glissé dans jQuery, j'ai utilisé:

$("#draggable").draggable({ disabled: true });          

$("#draggable").draggable({ disabled: false });

La réponse @Calciphus n'a pas fonctionné pour moi avec le problème d'opacité, j'ai donc utilisé:

div.ui-state-disabled.ui-draggable-disabled {opacity: 1;}

A travaillé sur les appareils mobiles non plus.

Voici le code: http://jsfiddle.net/nn5aL/1/

activer désactiver traînable jquery opacité problème html

— CarinaPilar
source

Votre JSfiddle ne semble pas fonctionner. Les boutons ne cliquent pas (avec la dernière version de Chrome). J'ai essayé de le mettre à jour en liens et d'appeler, button()mais cela n'a pas aidé.

— ashes999

2

parmi toutes les solutions proposées, celle-ci était la seule qui fonctionnait à 100% pour moi - toutes les autres (en utilisant des combinaisons de désactivation / destruction, etc.) n'ont tout simplement pas résolu le problème css. Dans mon application utilisant le glisser-déposer, j'ai trouvé que l'opacité était différente pour les éléments qui avaient été glissés depuis l'initialisation par rapport à ceux qui n'avaient pas été touchés. Tout cela est très compliqué. Merci à @CarinaPilar pour la solution et le jsfiddle pour le prouver.

— Andy Lorenz

11

Il m'a fallu un peu de temps pour comprendre comment désactiver le glissement lors du dépôt - utilisez ui.draggablepour référencer l'objet en cours de déplacement depuis la fonction de dépôt:

$("#drop-target").droppable({
    drop: function(event, ui) {
        ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);
        …
    }
});

HTH quelqu'un

— Oli Studholme
source

Merci pour cela. Cette solution semble bien fonctionner lors de l'utilisation de directives draggable / droppable dans AngularJS.

— Banjo Drill

10

On dirait que personne n'a regardé la documentation originale. Peut-être qu'il n'y en avait pas à ce moment-là))

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

$( ".selector" ).draggable({ disabled: true });

Obtenez ou définissez l'option désactivée, après init.

//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );

— makaroni4
source

Cela fonctionne mais a pour effet secondaire de rendre mon div à environ 50% d'opacité ... Je ne sais pas pourquoi.

— Devil's Advocate

@ScottBeeson Chaque fois que vous désactivez quelque chose dans jQuery, il ajoute la classe "ui-state-disabled". Vous pouvez le supprimer avec: $ (". Ui-draggable"). RemoveClass ("ui-state-disabled")

— Calciphus

7

Dans le cas d'un dialogue, il a une propriété appelée draggable, définissez-la sur false.

$("#yourDialog").dialog({
    draggable: false
});

Même si la question est ancienne, j'ai essayé la solution proposée et cela n'a pas fonctionné pour le dialogue. J'espère que cela peut aider d'autres comme moi.

— Andrei C
source

Je ne suis pas sûr que la question soit spécifiquement liée aux dialogues jQueryUI , mais j'ai néanmoins trouvé votre message utile.

— Shawn Eary

3

Voici à quoi cela ressemblerait à l'intérieur de .draggable({});

$("#yourDraggable").draggable({
    revert: "invalid" ,
    start: function(){ 
        $(this).css("opacity",0.3);
    },
    stop: function(){ 
        $(this).draggable( 'disable' )
    },
    opacity: 0.7,
    helper: function () { 
        $copy = $(this).clone(); 
        $copy.css({
            "list-style":"none",
            "width":$(this).outerWidth()
        }); 
        return $copy; 
    },
    appendTo: 'body',
    scroll: false
});

— maudulus
source

3

J'ai une solution plus simple et élégante qui ne gâche pas les classes, les styles, les opacités et tout.

Pour l'élément déplaçable - vous ajoutez l'événement 'start' qui s'exécutera à chaque fois que vous essayez de déplacer l'élément quelque part. Vous aurez une condition dans laquelle le déménagement n'est pas légal. Pour les mouvements illégaux - empêchez-les avec 'e.preventDefault ();' comme dans le code ci-dessous.

    $(".disc").draggable({
        revert: "invalid", 
        cursor: "move",
        start: function(e, ui){                
            console.log("element is moving");

            if(SOME_CONDITION_FOR_ILLEGAL_MOVE){
                console.log("illegal move");
                //This will prevent moving the element from it's position
                e.preventDefault();
            }    

        }
    });

Vous êtes les bienvenus :)

— Combiner
source

0

Changer l' draggableattribut de

<span draggable="true">Label</span>

à

<span draggable="false">Label</span>

— Ddagsan
source