Ketahui pemalam jQuery EasyUI EasyUI melaksanakan operasi seret asas_jquery dengan mudah

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 dc6dce4a544fdca2df29d5ac0ea9906b

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

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

$('#dd1').draggable(); Untuk elemen dc6dce4a544fdca2df29d5ac0ea9906b kedua, kami menjadikannya boleh diseret dengan mencipta proksi yang mengklonkan elemen asal.

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

Untuk elemen dc6dce4a544fdca2df29d5ac0ea9906b 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;
 }
});

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 e60d1b54bf999ac9e3299a277954b392

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>

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>

Seret mata pelajaran sekolah di sebelah kiri

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

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
  });
 }
 }
});

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.