¿Cómo desactivo jquery-ui arrastrable?

97

¿Cómo desactivo un jQuery arrastrable, por ejemplo, durante una devolución de datos de UpdatePanel?

jquery-ui ErnieStings
fuente

Respuestas:

148

Podría crear una función DisableDrag (myObject) y EnableDrag (myObject)

myObject.draggable( 'disable' )

Luego 

myObject.draggable( 'enable' )
madcolor
fuente
2
Esto funciona. Los documentos completos para draggable () están aquí . Lo mismo ocurre con los objetos ordenables () (si está permitiendo el reordenamiento de arrastrar y soltar)
nickb
3
Lo que quiere decir que los documentos arrastrables () están (¿ahora?) Aquí , con el enlace de nickb, arriba, yendo a la demostración . ;)
ruffin
Esto me da "no puedo llamar a métodos que se pueden arrastrar antes de la inicialización; intenté llamar al método 'deshabilitar'"
Haseeb Zulfiqar
Mian Haseeb: Vea esto: stackoverflow.com/questions/14955630/…
madcolor
68

Para deshabilitar temporalmente el comportamiento arrastrable, use:

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

Para eliminar el comportamiento arrastrable de forma permanente, utilice:

$('#item-id').draggable( "destroy" )
PhilB
fuente
6
Descubrí que 'deshabilitar' tiene un efecto secundario relacionado con CSS, pero destruir funciona a la perfección.
Niels Brinch
1
@jedanput el efecto secundario de usar deshabilitar es que los elementos arrastrables tienen una apariencia atenuada. Destruir parece dejar la apariencia sola.
samazi
19

Para habilitar / deshabilitar arrastrable en jQuery usé: 

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

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

La respuesta de @Calciphus no funcionó para mí con el problema de opacidad, así que usé:

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

Trabajó en dispositivos móviles tampoco.

Aquí está el código: http://jsfiddle.net/nn5aL/1/

habilitarinhabilitararrastrablejqueryopacidadproblemahtml

CarinaPilar
fuente
Su JSfiddle no parece estar funcionando. Los botones no hacen clic (usando la última versión de Chrome). Intenté actualizarlo a enlaces y llamadas, button()pero eso no ayudó.
cenizas999
2
de todas las soluciones dadas, esta fue la única que funcionó al 100% para mí; todas las demás (usando combinaciones de deshabilitar / destruir, etc.) simplemente no solucionaron el problema de css. En mi aplicación, usando arrastrar + soltar, encontré que la opacidad era diferente para los elementos que se habían arrastrado desde la inicialización en comparación con los que no se habían tocado. Todo muy desordenado. Gracias a @CarinaPilar tanto por la solución como por el jsfiddle para probarlo.
Andy Lorenz
11

Me tomó un poco de tiempo descubrir cómo deshabilitar la función de arrastrar al soltar; utilícelo ui.draggablepara hacer referencia al objeto que se arrastra desde dentro de la función de soltar:

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

HTH alguien

Oli Studholme
fuente
Gracias por esto. Esta solución parece funcionar bien cuando se utilizan directivas que se pueden arrastrar / soltar en AngularJS.
Banjo Drill
10

Parece que nadie miró la documentación original. Puede ser que no lo hubiera en ese momento))

Inicialice un arrastrable con la opción deshabilitada especificada.

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

Obtenga o configure la opción deshabilitada, después de init.

//getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
//setter
$( ".selector" ).draggable( "option", "disabled", true );
makaroni4
fuente
Esto funciona, pero tiene el efecto secundario de hacer que mi div tenga una opacidad del 50% ... No tengo idea de por qué.
Abogado del Diablo
@ScottBeeson Cada vez que deshabilita algo en jQuery, agrega la clase "ui-state-disabled". Puede eliminarlo con: $ (". Ui-draggable"). RemoveClass ("ui-state-disabled")
Calciphus
7

En el caso de un diálogo, tiene una propiedad llamada arrastrable, establézcalo en falso.

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

Aunque la pregunta es antigua, probé la solución propuesta y no funcionó para el diálogo. Espero que esto pueda ayudar a otros como yo.

Andrei C
fuente
No estoy seguro de la cuestión está específicamente relacionado con jQueryUI diálogos , pero me encontré con tu post útil, no obstante.
Shawn Eary
3

A continuación se muestra cómo se vería esto dentro 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
});
maudulus
fuente
3

Tengo una solución más simple y elegante que no estropea clases, estilos, opacidades y demás.

Para el elemento que se puede arrastrar, agrega el evento 'inicio' que se ejecutará cada vez que intente mover el elemento a algún lugar. Tendrá una condición por la cual mudarse no es legal. Para los movimientos que son ilegales, evítelos con 'e.preventDefault ();' como en el código siguiente.

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

        }
    });

De nada :)

Combinar
fuente
0

Cambiar draggableatributo de

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

a

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