Ketahui pemalam jQuery EasyUI EasyUI melaksanakan operasi seret asas

Tutorial ini menunjukkan kepada anda cara membuat elemen HTML boleh diseret, dalam kes ini kami akan mencipta tiga elemen DIV dan kemudian membolehkan penyeretan dan penempatannya.

Pertama, kami mencipta tiga elemen

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

Salin selepas log masuk

Untuk elemen >div< yang pertama, kami menjadikannya boleh diseret secara lalai.

$('#dd1').draggable(); Untuk elemen

kedua, kami menjadikannya boleh diseret dengan mencipta proksi yang mengklonkan elemen asal.

$('#dd2').draggable({
 proxy:'clone'
});

Salin selepas log masuk

Untuk elemen

ketiga, kami menjadikannya boleh diseret dengan mencipta proksi tersuai.

$('#dd3').draggable({
 proxy:function(source){
 var p = $('<div class="proxy">proxy</div>');
 p.appendTo('body');
 return p;
 }
});

Salin selepas log masuk

Berikut ialah contoh mudah kurikulum sekolah, semua orang dialu-alukan untuk belajar:

Kami akan mencipta dua jadual: satu menunjukkan mata pelajaran sekolah di sebelah kiri dan jadual waktu di sebelah kanan. Anda boleh seret dan lepas mata pelajaran sekolah ke sel jadual waktu. Subjek sekolah ialah elemen

Tunjukkan mata pelajaran sekolah

<div class="left">
 <table>
 <tr>
  <td><div class="item">English</div></td>
 </tr>
 <tr>
  <td><div class="item">Science</div></td>
 </tr>
 <!-- other subjects -->
 </table>
</div>

Salin selepas log masuk

Tunjukkan jadual

<div class="right">
 <table>
 <tr>
  <td class="blank"></td>
  <td class="title">Monday</td>
  <td class="title">Tuesday</td>
  <td class="title">Wednesday</td>
  <td class="title">Thursday</td>
  <td class="title">Friday</td>
 </tr>
 <tr>
  <td class="time">08:00</td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
 </tr>
 <!-- other cells -->
 </table>
</div>

Salin selepas log masuk

Seret mata pelajaran sekolah di sebelah kiri

$('.left .item').draggable({
 revert:true,
 proxy:'clone'
});

Salin selepas log masuk

Letakkan mata pelajaran sekolah pada sel jadual waktu

$('.right td.drop').droppable({
 onDragEnter:function(){
 $(this).addClass('over');
 },
 onDragLeave:function(){
 $(this).removeClass('over');
 },
 onDrop:function(e,source){
 $(this).removeClass('over');
 if ($(source).hasClass('assigned')){
  $(this).append(source);
 } else {
  var c = $(source).clone().addClass('assigned');
  $(this).empty().append(c);
  c.draggable({
  revert:true
  });
 }
 }
});

Salin selepas log masuk

Seperti yang anda lihat dalam kod di atas, apabila pengguna menyeret subjek sekolah di sebelah kiri dan menjatuhkannya ke dalam sel jadual waktu, fungsi panggil balik onDrop akan dipanggil. Kami mengklon elemen sumber yang diseret dari kiri dan melampirkannya pada sel jadual. Apabila menyeret subjek sekolah dari satu sel jadual waktu ke sel lain, hanya alihkannya.

Di atas adalah untuk menunjukkan kepada anda cara menggunakan jQuery EasyUI untuk mencipta kurikulum sekolah.

Label berkaitan：

easyui jquery seret Kurikulum

sumber：php.cn

Artikel sebelumnya：Ringkasan contoh pengendalian pengecualian dalam kemahiran programming_javascript javascript Artikel seterusnya：Bootstrap js plug-in yang anda mesti pelajari setiap hari kemahiran javascript

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang