Bir jquery-ui sürüklenebilirliğini nasıl devre dışı bırakırım?

Bir jQuery sürüklenebilir dosyasını nasıl devre dışı bırakırım, örneğin bir UpdatePanel geri gönderimi sırasında?

Bir DisableDrag (myObject) ve bir EnableDrag (myObject) işlevi oluşturabilir

myObject.draggable( 'disable' )

Sonra

myObject.draggable( 'enable' )

Sürüklenebilir davranışı geçici olarak devre dışı bırakmak için şunu kullanın:

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

Sürüklenebilir davranışı kalıcı olarak kaldırmak için şunu kullanın:

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

JQuery'de sürüklenebilirliği etkinleştirmek / devre dışı bırakmak için kullandım:

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

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

@Calciphus cevabı opaklık problemiyle benim için işe yaramadı, bu yüzden kullandım:

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

Mobil cihazlarda da çalıştı.

İşte kod: http://jsfiddle.net/nn5aL/1/

etkinleştirmedevre dışı bırakmaksürüklenebilirjqueryopaklıksorunhtml

Bırakıldığında sürüklenmeyi nasıl devre dışı bırakacağımı bulmam biraz zaman aldı — ui.draggablebırakma işlevinin içinden sürüklenen nesneye referans vermek için kullanın :

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

HTH birisi

Orijinal belgelere kimse bakmamış gibi görünüyor. Belki o zaman yoktu))

Devre dışı bırakılmış seçeneği belirtilen sürüklenebilir bir dosyayı başlatın.

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

Init'ten sonra devre dışı bırakılmış seçeneği alın veya ayarlayın.

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

Bir iletişim kutusu olması durumunda, sürüklenebilir adlı bir özelliği vardır, bunu yanlış olarak ayarlayın.

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

Soru eski olmasına rağmen önerilen çözümü denedim ve diyalog için işe yaramadı. Umarım bu benim gibi başkalarına yardımcı olabilir.

Aşağıdakiler, bunun içinde nasıl görüneceği .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
});

Sınıfları, stilleri, opaklıkları ve diğer şeyleri karıştırmayan daha basit ve zarif bir çözümüm var.

Sürüklenebilir öğe için - öğeyi bir yere her hareket ettirmeye çalıştığınızda yürütülecek "başlangıç" olayını eklersiniz. Yasal olmayan bir durumunuz olacak. Yasadışı hareketler için - bunları 'e.preventDefault ()' ile engelleyin; aşağıdaki koddaki gibi.

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

        }
    });

Rica ederim :)

draggableÖzniteliği şundan değiştir :

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

-e

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