Wie deaktiviere ich ein jquery-ui draggable?

Wie deaktiviere ich ein jQuery-Draggable, z. B. während eines UpdatePanel-Postbacks?

Könnte eine DisableDrag (myObject) - und eine EnableDrag (myObject) -Funktion erstellen

myObject.draggable( 'disable' )

Dann

myObject.draggable( 'enable' )

Um das ziehbare Verhalten vorübergehend zu deaktivieren, verwenden Sie:

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

Um das ziehbare Verhalten dauerhaft zu entfernen, verwenden Sie:

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

Um Draggable in jQuery zu aktivieren / deaktivieren, habe ich Folgendes verwendet:

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

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

@ Calciphus Antwort hat bei mir mit dem Opazitätsproblem nicht funktioniert, also habe ich verwendet:

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

Arbeitete auch auf mobilen Geräten.

Hier ist der Code: http://jsfiddle.net/nn5aL/1/

aktivierendeaktivierenziehbarjqueryOpazitätProblemhtml

Es hat eine Weile gedauert, bis ich herausgefunden habe, wie Draggable beim Ablegen deaktiviert werden kann. Verwenden Sie diese Option, um ui.draggableauf das Objekt zu verweisen, das aus der Drop-Funktion gezogen wird:

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

HTH jemand

Es scheint, als hätte niemand die Originaldokumentation angesehen. Vielleicht gab es damals noch kein))

Initialisieren Sie ein Draggable mit der angegebenen deaktivierten Option.

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

Holen Sie sich die deaktivierte Option nach init oder setzen Sie sie.

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

Im Falle eines Dialogfelds hat es eine Eigenschaft namens draggable. Setzen Sie sie auf false.

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

Obwohl die Frage alt ist, habe ich die vorgeschlagene Lösung ausprobiert und sie hat für den Dialog nicht funktioniert. Hoffe das kann anderen wie mir helfen.

Das Folgende ist, wie dies innerhalb von aussehen würde .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
});

Ich habe eine einfachere und elegantere Lösung, die Klassen, Stile, Trübungen und andere Dinge nicht durcheinander bringt.

Für das ziehbare Element fügen Sie ein 'Start'-Ereignis hinzu, das jedes Mal ausgeführt wird, wenn Sie versuchen, das Element irgendwohin zu verschieben. Sie haben eine Bedingung, deren Umzug nicht legal ist. Für illegale Bewegungen - verhindern Sie sie mit 'e.preventDefault ();' wie im Code unten.

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

        }
    });

Bitte schön :)

draggableAttribut ändern von

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

zu

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