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

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

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

myObject.draggable( 'disable' )

ensuite

myObject.draggable( 'enable' )

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" )

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/

activerdésactivertraînablejqueryopacitéproblèmehtml

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

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 );

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.

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
});

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 :)

Changer l' draggableattribut de

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

à

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