Jak wyłączyć możliwość przeciągania jQuery-ui?

Jak wyłączyć możliwość przeciągania jQuery, np. Podczas ogłaszania zwrotnego UpdatePanel?

Mogło utworzyć funkcję DisableDrag (myObject) i EnableDrag (myObject)

myObject.draggable( 'disable' )

Następnie

myObject.draggable( 'enable' )

Aby tymczasowo wyłączyć zachowanie, które można przeciągać, użyj:

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

Aby trwale usunąć zachowanie, które można przeciągać, użyj:

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

Aby włączyć / wyłączyć draggable w jQuery, których użyłem:

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

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

Odpowiedź @Calciphus nie działała dla mnie z problemem krycia, więc użyłem:

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

Pracował również na urządzeniach mobilnych.

Oto kod: http://jsfiddle.net/nn5aL/1/

włączyćwyłączyćprzeciągalnyjquerynieprzezroczystośćproblemhtml

Zajęło mi trochę czasu, zanim dowiedziałem się, jak wyłączyć możliwość przeciągania podczas upuszczania - użyj ui.draggabledo odniesienia się do obiektu przeciąganego z wnętrza funkcji upuszczania:

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

Ktoś HTH

Wygląda na to, że nikt nie zajrzał do oryginalnej dokumentacji. Może nie było go wtedy))

Zainicjuj plik do przeciągania z określoną wyłączoną opcją.

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

Pobierz lub ustaw opcję wyłączoną po inicjalizacji.

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

W przypadku okna dialogowego ma właściwość o nazwie draggable, ustaw ją na false.

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

Chociaż pytanie jest stare, wypróbowałem proponowane rozwiązanie i nie zadziałało w przypadku okna dialogowego. Mam nadzieję, że to pomoże innym takim jak ja.

Poniżej opisano, jak to wyglądałoby w środku .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
});

Mam prostsze i eleganckie rozwiązanie, które nie psuje klas, stylów, krycia i innych rzeczy.

W przypadku elementu do przeciągania - dodajesz zdarzenie „start”, które będzie wykonywane za każdym razem, gdy spróbujesz gdzieś przenieść element. Będziesz mieć stan, w którym ruch jest niezgodny z prawem. W przypadku ruchów, które są nielegalne - zapobiegaj im za pomocą 'e.preventDefault ();' jak w kodzie poniżej.

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

        }
    });

Zapraszamy :)

Zmień draggableatrybut z

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

do

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