Como desativo um arrastável jquery-ui?

97

Como eu desativo um jQuery arrastável, por exemplo, durante um postback do UpdatePanel?

jquery-ui

— ErnieStings
fonte

148

Poderia criar uma função DisableDrag (myObject) e EnableDrag (myObject)

myObject.draggable( 'disable' )

Então

myObject.draggable( 'enable' )

— madcolor
fonte

2

Isso funciona. Documentos completos para draggable () estão aqui . O mesmo vale para objetos sortable () (se você estiver permitindo a reordenação arrastar e soltar.)

— nickb

3

O que quer dizer que os documentos draggable () estão (agora?) Aqui , com o link do nickb, acima, indo para o demo . ;)

— ruffin de

Isso me dá "não é possível chamar métodos arrastáveis antes da inicialização; tentativa de chamar o método 'desativar'"

— Haseeb Zulfiqar

Mian Haseeb: Veja isto: stackoverflow.com/questions/14955630/…

— madcolor

68

Para desativar temporariamente o comportamento arrastável, use:

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

Para remover o comportamento arrastável permanentemente, use:

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

— PhilB
fonte

6

Eu descobri que 'desativar' tem um efeito colateral relacionado ao CSS, mas destruir funciona perfeitamente.

— Niels Brinch,

1

@jedanput o efeito colateral de desativar é que os elementos arrastáveis têm uma aparência acinzentada. destruir parece deixar a aparência em paz.

— samazi,

19

Para habilitar / desabilitar draggable em jQuery eu usei:

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

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

A resposta da @Calciphus não funcionou para mim com o problema de opacidade, então usei:

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

Funcionou em dispositivos móveis também.

Aqui está o código: http://jsfiddle.net/nn5aL/1/

habilitar desabilitar arrastável jquery opacidade problema html

— CarinaPilar
fonte

Seu JSfiddle não parece estar funcionando. Os botões não clicam (usando o Chrome mais recente). Tentei atualizar para links e ligar, button()mas não adiantou.

— ashes999

2

de todas as soluções fornecidas, esta foi a única que funcionou 100% para mim - todas as outras (usando combinações de desativar / destruir etc.) simplesmente não corrigiram o problema de css. No meu aplicativo, usando arrastar + soltar, descobri que a opacidade era diferente para os elementos que foram arrastados desde a inicialização em comparação com aqueles que não foram tocados. Tudo muito bagunçado. Obrigado a @CarinaPilar pela solução e pelo jsfiddle para provar isso.

— Andy Lorenz

11

Levei um pouco de tempo para descobrir como desabilitar arrastável ao soltar - use ui.draggablepara fazer referência ao objeto sendo arrastado de dentro da função de soltar:

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

HTH alguém

— Oli Studholme
fonte

Obrigado por isso. Esta solução parece funcionar bem ao usar diretivas arrastáveis / soltáveis no AngularJS.

— Banjo Drill

10

Parece que ninguém olhou a documentação original. Pode ser que não houvesse naquela época))

Inicializa um arrastável com a opção desativada especificada.

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

Obtenha ou defina a opção disabled, após o init.

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

— Makaroni4
fonte

Isso funciona, mas tem um efeito colateral de tornar meu div cerca de 50% de opacidade ... Não tenho ideia do porquê.

— Advogado do Diabo

@ScottBeeson Sempre que você desabilita algo no jQuery, ele adiciona a classe "ui-state-disabled". Você pode removê-lo com: $ (". Ui-draggable"). RemoveClass ("ui-state-disabled")

— Calciphus

7

No caso de uma caixa de diálogo, ela tem uma propriedade chamada draggable, defina-a como false.

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

Embora a pergunta seja antiga, tentei a solução proposta e não funcionou para o diálogo. Espero que isso possa ajudar outras pessoas como eu.

— Andrei C
fonte

Não tenho certeza se a pergunta está especificamente relacionada ao jQueryUI Dialogs , mas achei sua postagem útil mesmo assim.

— Shawn Eary

3

A seguir está como isso ficaria 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
fonte

3

Tenho uma solução mais simples e elegante que não atrapalha classes, estilos, opacidades e outras coisas.

Para o elemento arrastável - você adiciona o evento 'start' que será executado toda vez que você tentar mover o elemento para algum lugar. Você terá uma condição em que o movimento não é legal. Para os movimentos ilegais - evite-os com 'e.preventDefault ();' como no código abaixo.

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

        }
    });

Você é bem vindo :)

— Combinar
fonte

0

Alterar draggableatributo de

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

para

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

— ddagsan
fonte