¿Cómo se desactiva un jquery-ui pueden arrastrarse?

Question

¿Cómo se desactiva un jQuery que pueden arrastrarse, por ejemplo, durante una devolución de datos de UpdatePanel?

Answer 1

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

myObject.draggable('disable') 

Entonces

myObject.draggable('enable') 

Answer 2

Me tomó un poco de tiempo para averiguar cómo desactivar pueda arrastrar en la caída de usar ui.draggable para hacer referencia al objeto que está siendo arrastrado desde el interior de la función de caída:

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

HTH alguien

Answer 3

Para desactivar temporalmente el uso que pueden arrastrarse comportamiento:

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

Para retirar el comportamiento que pueden arrastrarse utilizar de forma permanente:

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

Answer 4

parece que nadie miraba a la documentación original. Puede ser que no había en ese momento))

inicializar una arrastrable con la opción desactivada especificado.

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

Obtiene o establece la opción deshabilitada, después de iniciar.

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

Answer 5

En el caso de un cuadro de diálogo, tiene una propiedad llamada "arrastrable", configúrelo como 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 ayude a otros como yo.

Answer 6

Para activar/desactivar arrastrable en jQuery utilicé:

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

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

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

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

trabajado en dispositivos móviles ya sea.

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

enabledisabledraggablejqueryopacityproblemhtml

Answer 7

Lo siguiente es lo que esto se vería como en el interior 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 
}); 

Answer 8

Cambio draggable atributo de

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

a

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

Answer 9

tengo una solución simple y elegante que no pierde el tiempo con las clases, estilos, opacidades y esas cosas.

Para el elemento arrastrable: agregue el evento 'inicio' que se ejecutará cada vez que intente mover el elemento a alguna parte. Tendrás una condición que mover no es legal. Para los movimientos que son ilegales, evítelos con 'e.preventDefault();' como en el código de abajo

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

     } 
    }); 

que son bienvenidos :)