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

99

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

jquery-ui

— ErnieStings
źródło

148

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

myObject.draggable( 'disable' )

Następnie

myObject.draggable( 'enable' )

— madcolor
źródło

2

To działa. Pełne dokumenty dla draggable () są tutaj . To samo dotyczy obiektów sortable () (jeśli

— zezwalasz na

3

To znaczy, że dokumenty draggable () są (teraz?) Tutaj , z linkiem nickba powyżej, przechodząc do wersji demonstracyjnej . ;)

— ruffin

To daje mi „nie można wywołać metody na przeciągany przed inicjalizacji; próbowali metody wywołania«wyłącz»”

— Haseeb zulfikar

Mian Haseeb: Zobacz to: stackoverflow.com/questions/14955630/…

— madcolor

69

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

— PhilB
źródło

6

Odkryłem, że „wyłącz” ma efekt uboczny związany z CSS, ale niszczenie działa bez zarzutu.

— Niels Brinch

1

@jedanput Efektem ubocznym używania funkcji disable jest to, że elementy, które można przeciągać, są wyszarzone. zniszczenie wydaje się pozostawić wygląd w spokoju.

— samazi

19

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ągalny jquery nieprzezroczystość problem html

— CarinaPilar
źródło

Wygląda na to, że Twój JSfiddle nie działa. Przyciski nie klikają (w najnowszej wersji Chrome). Próbowałem zaktualizować go do linków i dzwonić, button()ale to nie pomogło.

— popioły 999

2

Spośród wszystkich podanych rozwiązań, to było jedyne, które działało dla mnie w 100% - wszystkie inne (używając kombinacji wyłącz / zniszcz itp.) po prostu nie rozwiązały problemu z css. W mojej aplikacji za pomocą przeciągnij + upuść zauważyłem, że krycie było inne dla tych elementów, które zostały przeciągnięte od momentu inicjalizacji, w porównaniu z tymi, które nie zostały dotknięte. Wszystko bardzo niechlujne. Podziękowania dla @CarinaPilar za rozwiązanie i jsfiddle, aby to udowodnić.

— Andy Lorenz

11

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

— Oli Studholme
źródło

Dzięki za to. Wydaje się, że to rozwiązanie działa dobrze podczas używania dyrektyw draggable / droppable w AngularJS.

— Banjo Drill,

10

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

— makaroni4
źródło

To działa, ale ma efekt uboczny polegający na tym, że mój div ma około 50% krycia ... Nie mam pojęcia, dlaczego.

— Devil's Advocate

@ScottBeeson Za każdym razem, gdy wyłączasz coś w jQuery, dodaje to klasę „ui-state-disabled”. Możesz go usunąć za pomocą: $ (". Ui-draggable"). RemoveClass ("ui-state-disabled")

— Calciphus

7

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.

— Andrei C
źródło

Nie jestem pewien, kwestia jest szczególnie związane z jQueryUI Dialogi , ale znalazłem Twój post jako mimo wszystko.

— Shawn Eary

3

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

— maudulus
źródło

3

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

— Połączyć
źródło

0

Zmień draggableatrybut z

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

do

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

— ddagsan
źródło