Bagaimana cara menonaktifkan jquery-ui draggable?

97

Bagaimana cara menonaktifkan jQuery draggable, misalnya selama postback UpdatePanel?

jquery-ui

— ErnieStings
sumber

148

Dapat membuat fungsi DisableDrag (myObject) dan EnableDrag (myObject)

myObject.draggable( 'disable' )

Kemudian

myObject.draggable( 'enable' )

— madcolor
sumber

2

Ini bekerja. Dokumen lengkap untuk draggable () ada di sini . Hal yang sama berlaku untuk objek sortable () (jika Anda mengizinkan

— penyusunan

3

Artinya, dokumen draggable () ada (sekarang?) Di sini , dengan tautan nickb, di atas, menuju ke demo . ;)

— ruffin

Ini memberi saya "tidak dapat memanggil metode pada draggable sebelum inisialisasi; mencoba memanggil metode 'nonaktifkan'"

— Haseeb Zulfiqar

Mian Haseeb: Lihat ini: stackoverflow.com/questions/14955630/…

— madcolor

68

Untuk sementara menonaktifkan penggunaan perilaku draggable:

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

Untuk menghapus perilaku draggable secara permanen gunakan:

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

— PhilB
sumber

6

Saya menemukan bahwa 'disable' memiliki efek samping terkait css, tetapi destruksi bekerja dengan sempurna.

— Niels Brinch

1

@jedanput efek samping dari penggunaan disable adalah elemen draggable memiliki tampilan berwarna abu-abu. menghancurkan tampaknya meninggalkan penampilannya sendiri.

— samazi

19

Untuk mengaktifkan / menonaktifkan draggable di jQuery saya menggunakan:

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

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

Jawaban @Calciphus tidak berfungsi untuk saya dengan masalah opacity, jadi saya menggunakan:

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

Bekerja di perangkat seluler juga.

Ini kodenya: http://jsfiddle.net/nn5aL/1/

memungkinkan nonaktifkan bisa diseret jquery kegelapan masalah html

— CarinaPilar
sumber

JSfiddle Anda sepertinya tidak berfungsi. Tombol tidak dapat diklik (menggunakan Chrome terbaru). Saya mencoba memperbaruinya ke tautan dan menelepon button()tetapi itu tidak membantu.

— ashes999

2

dari semua solusi yang diberikan, yang satu ini adalah satu-satunya yang bekerja 100% untuk saya - yang lainnya (menggunakan kombinasi nonaktifkan / hancurkan dll) tidak memperbaiki masalah css. Di aplikasi saya menggunakan drag + drop, saya menemukan opacity berbeda untuk elemen yang telah diseret sejak inisialisasi dibandingkan dengan yang belum disentuh. Semuanya sangat berantakan. Terima kasih kepada @CarinaPilar atas solusinya dan jsfiddle untuk membuktikannya.

— Andy Lorenz

11

Saya butuh sedikit waktu untuk memikirkan cara menonaktifkan draggable saat lepas — gunakan ui.draggableuntuk mereferensikan objek yang ditarik dari dalam fungsi drop:

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

HTH seseorang

— Oli Studholme
sumber

Terima kasih untuk ini. Solusi ini tampaknya berfungsi dengan baik saat menggunakan arahan draggable / droppable di AngularJS.

— Bor Banjo

10

Sepertinya tidak ada yang melihat dokumentasi aslinya. Mungkin tidak ada saat itu))

Inisialisasi draggable dengan opsi nonaktif yang ditentukan.

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

Dapatkan atau setel opsi nonaktif, setelah init.

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

— makaroni4
sumber

Ini berfungsi tetapi memiliki efek samping membuat div saya sekitar 50% opacity ... Saya tidak tahu mengapa.

— Pengacara Setan

@ScottBeeson Setiap kali Anda menonaktifkan sesuatu di jQuery, ia menambahkan kelas "ui-state-disabled". Anda dapat menghapusnya dengan: $ (". Ui-draggable"). RemoveClass ("ui-state-disabled")

— Calciphus

7

Dalam kasus dialog, ini memiliki properti yang disebut draggable, setel ke false.

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

Meskipun pertanyaannya sudah lama, saya mencoba solusi yang diusulkan dan tidak berhasil untuk dialog. Semoga ini dapat membantu orang lain seperti saya.

— Andrei C
sumber

Saya tidak yakin pertanyaan itu secara khusus terkait dengan jQueryUI Dialogs , tetapi saya menemukan posting Anda bermanfaat.

— Shawn Eary

3

Berikut ini adalah tampilan di dalamnya .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
sumber

3

Saya memiliki solusi yang lebih sederhana dan elegan yang tidak mengacaukan kelas, gaya, kekeruhan, dan sebagainya.

Untuk elemen draggable - Anda menambahkan event 'start' yang akan dijalankan setiap kali Anda mencoba memindahkan elemen ke suatu tempat. Anda akan memiliki kondisi dimana perpindahan tersebut tidak sah. Untuk perpindahan yang ilegal - cegah mereka dengan 'e.preventDefault ();' seperti pada kode di bawah ini.

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

        }
    });

Sama sama :)

— Menggabungkan
sumber

0

Ubah draggableatribut dari

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

untuk

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

— ddagsan
sumber