jQuery draggable - apa yang terjadi jika diterapkan dua kali ke suatu elemen?

Sampai saat ini saya sudah menyiapkan ini, yang dipanggil beberapa kali:

                $('.rsh')
                    .draggable('destroy')                               
                    .draggable({ blah blah details });

destroy ada di sana untuk menghentikan beberapa penangan yang dapat diseret terakumulasi di kelas. Elemen baru sedang dibuat oleh AJAX, dan lampiran awal draggable ke kelas tidak menyentuh elemen yang dibuat selanjutnya.

Namun, ketika saya memperbarui jQuery UI ke versi 1.9.2, saya mulai mendapat kesalahan ini:

Kesalahan: tidak dapat memanggil metode yang dapat diseret sebelum inisialisasi; mencoba memanggil metode 'hancurkan'

Jadi saya menghapus garis kehancuran, dan itu manis. Kecuali... Saya curiga sekarang saya mungkin akan menambahkan lebih banyak penangan ke kelas (itulah sebabnya destroy ada di sana sejak awal).

Saya mencoba ini, tetapi tidak menyukainya:

if ($('.rsh').length) {
    $('.rsh').draggable('destroy'); 
}

Dua pertanyaan: (1) Apakah akan ada lebih banyak penangan yang melekat pada kelas setiap kali saya mengaktifkan baris pengaturan yang dapat diseret? (2) Jika iya, ada solusi bagaimana cara menghilangkannya?


javascript jquery jquery-ui-draggable
person Nick    schedule 09.01.2013    source sumber

Jawaban (2)


arrow_upward
6
arrow_downward

Tidak, tidak akan ada penangan tambahan yang terikat. jQuery mendaftarkan instance yang diinisialisasi ke elemen dan tidak akan membuat instance baru dari widget yang sama untuk elemen yang sama.

Saat Anda khawatir tentang penangan, berikut pemeriksaan singkatnya (jQuery 1.8+ dan UI 1.9+):

$('div').draggable();
console.log( $._data($('div')[0], 'events') );
$('div').draggable();
console.log( $._data($('div')[0], 'events') );

Biola

Seperti yang Anda lihat, objek penangan yang terpasang tidak diubah setelah mencoba menginisialisasi instance baru yang dapat diseret pada elemen yang sama.

edit: Panggilan berikutnya dengan parameter tidak akan diabaikan, melainkan akan memperluas widget yang ada seperti yang ditunjukkan pada jawaban @Jason Sperske.

person Fabrício Matté    schedule 09.01.2013

arrow_upward
5
arrow_downward

Panggilan berikutnya ke .draggable() memperpanjang panggilan sebelumnya ketika dilampirkan ke objek yang sama (dan tidak menggantikannya seperti yang saya duga sebelumnya). Lihat contoh ini (diperpanjang dari Fabrício Matté's) (demo)

<div>foo</div>
<script>
 $('div').draggable({
  start: function () {
    console.log("drag 1");
  }
 });
 console.log($._data($('div')[0], 'events'));
 $('div').draggable({
  stop: function () {
    console.log("drag 2");
  }
 });
 console.log($._data($('div')[0], 'events'));
</script>

Di console.log Anda hanya melihat pesan-pesan ini:

drag 1 <- on start
drag 2 <- on stop
person Jason Sperske    schedule 09.01.2013
comment
Oh bagus, saya lupa mempertimbangkan perluasan widget saat ini. +1 untuk melengkapinya. - person Fabrício Matté; 10.01.2013