Bagaimana cara menonaktifkan jquery-ui draggable?

97

Bagaimana cara menonaktifkan jQuery draggable, misalnya selama postback UpdatePanel?

jquery-ui ErnieStings
sumber

Jawaban:

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/

memungkinkannonaktifkanbisa diseretjquerykegelapanmasalahhtml

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