Come si disabilita un trascinabile jquery-ui?

97

Come disabilito un jQuery trascinabile, ad esempio durante un postback UpdatePanel?

jquery-ui

— ErnieStings
fonte

148

Potrebbe creare una funzione DisableDrag (myObject) e EnableDrag (myObject)

myObject.draggable( 'disable' )

Poi

myObject.draggable( 'enable' )

— madcolor
fonte

2

Funziona. I documenti completi per draggable () sono qui . Lo stesso vale per gli oggetti sortable () (se consenti il riordino drag-n-drop.)

— nickb

3

Vale a dire che i documenti trascinabili () sono (ora?) Qui , con il link di nickb, sopra, andando alla demo . ;)

— ruffin

Questo mi dà "Impossibile chiamare metodi trascinabili prima dell'inizializzazione; tentato di chiamare il metodo" disable ""

— Haseeb Zulfiqar

Mian Haseeb: Vedere questo: stackoverflow.com/questions/14955630/...

— madcolor

68

Per disabilitare temporaneamente il comportamento trascinabile, utilizzare:

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

Per rimuovere permanentemente il comportamento trascinabile, usa:

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

— PhilB
fonte

6

Ho scoperto che "disable" ha un effetto collaterale correlato a CSS, ma distruggere funziona perfettamente.

— Niels Brinch

1

@jedanput l'effetto collaterale dell'utilizzo di disable è che gli elementi trascinabili hanno un aspetto grigio. distruggere sembra lasciare solo l'aspetto.

— samazi

19

Per abilitare / disabilitare il trascinabile in jQuery ho usato:

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

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

La risposta di @Calciphus non ha funzionato per me con il problema di opacità, quindi ho usato:

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

Ha funzionato anche su dispositivi mobili.

Ecco il codice: http://jsfiddle.net/nn5aL/1/

abilitare disattivare trascinabile jquery opacità problema html

— CarinaPilar
fonte

Il tuo JSfiddle sembra non funzionare. I pulsanti non fanno clic (utilizzando l'ultima versione di Chrome). Ho provato ad aggiornarlo su collegamenti e chiamate, button()ma non è stato d'aiuto.

— ceneri999

2

tra tutte le soluzioni fornite, questa è stata l'unica che ha funzionato al 100% per me - tutte le altre (utilizzando combinazioni di disabilitazione / distruzione ecc.) Non hanno risolto il problema css. Nella mia app usando il drag + drop ho scoperto che l'opacità era diversa per quegli elementi che erano stati trascinati dall'inizializzazione rispetto a quelli che non erano stati toccati. Tutto molto disordinato. Grazie a @CarinaPilar sia per la soluzione che per il jsfiddle per dimostrarlo.

— Andy Lorenz

11

Mi ci è voluto un po 'di tempo per capire come disabilitare il trascinamento al rilascio, utilizzare ui.draggableper fare riferimento all'oggetto trascinato dall'interno della funzione di rilascio:

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

HTH qualcuno

— Oli Studholme
fonte

Grazie per questo. Questa soluzione sembra funzionare bene quando si utilizzano direttive trascinabili / trascinabili in AngularJS.

— Banjo Drill

10

Sembra che nessuno abbia guardato la documentazione originale. Forse non c'era in quel momento))

Inizializza un trascinabile con l'opzione disabilitata specificata.

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

Ottieni o imposta l'opzione disabilitata, dopo init.

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

— makaroni4
fonte

Funziona ma ha un effetto collaterale di rendere il mio div circa il 50% di opacità ... Non ho idea del perché.

— Devil's Advocate

@ScottBeeson Ogni volta che disabiliti qualcosa in jQuery, aggiunge la classe "ui-state-disabled". Puoi rimuoverlo con: $ (". Ui-trascinabile"). RemoveClass ("ui-state-disabled")

— Calciphus

7

Nel caso di una finestra di dialogo, ha una proprietà chiamata trascinabile, impostala su false.

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

Anche se la domanda è vecchia, ho provato la soluzione proposta e non ha funzionato per la finestra di dialogo. Spero che questo possa aiutare altri come me.

— Andrei C
fonte

Non sono sicuro che la domanda sia specificamente correlata alle finestre di dialogo jQueryUI , ma ho trovato comunque utile il tuo post.

— Shawn Eary

3

Quanto segue è come apparirebbe all'interno di .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
fonte

3

Ho una soluzione più semplice ed elegante che non crea confusione con classi, stili, opacità e cose del genere.

Per l'elemento trascinabile - aggiungi l'evento "start" che verrà eseguito ogni volta che proverai a spostare l'elemento da qualche parte. Avrai una condizione che la mossa non è legale. Per le mosse illegali, prevenile con 'e.preventDefault ();' come nel codice qui sotto.

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

        }
    });

Prego :)

— Combina
fonte

0

Cambia draggableattributo da

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

per

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

— ddagsan
fonte