Cara menggunakan Layui untuk melaksanakan fungsi pengisihan elemen halaman boleh seret

Cara menggunakan Layui untuk melaksanakan fungsi pengisihan elemen halaman boleh seret

Kata Pengantar:
Dalam pembangunan Web, elemen halaman Isih permintaan bersama. Menggunakan Layui sebagai rangka kerja bahagian hadapan, anda boleh melaksanakan pengisihan seret dan lepas elemen halaman dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Layui untuk melaksanakan fungsi ini dan memberikan contoh kod khusus.

1. Penyediaan projek

1. Muat turun Layui dan konfigurasikannya ke dalam projek. Alamat muat turun Layui: https://www.layui.com/
2. Buat fail HTML dan perkenalkan fail berkaitan Layui.

2. Laksanakan fungsi pengisihan elemen halaman boleh seret

1. struktur HTML
   Dalam HTML, kami perlu menyediakan Tambah pengecam unik untuk elemen halaman boleh seret, dan tambahkan id pada setiap bekas elemen halaman.

<div id="container">
  <div class="item" id="item1">元素1</div>
  <div class="item" id="item2">元素2</div>
  <div class="item" id="item3">元素3</div>
  <div class="item" id="item4">元素4</div>
</div>

2. Gaya CSS
   Untuk melaksanakan fungsi seret dan lepas, kita perlu menambah beberapa gaya CSS.

.item {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
  cursor: move;
}

3. Kod JavaScript
   Menggunakan API pengisihan elemen Layui, anda boleh melaksanakan fungsi pengisihan elemen halaman boleh seret dengan mudah.

layui.use(['element', 'jquery'], function(){
  var element = layui.element;
  var $ = layui.jquery;

  // 初始化排序
  element.sort('container', function(elem){
    return elem.clone();
  });

  // 监听元素位置更新
  element.on('elemSort(container)', function(elem){
    // 获取排序后的元素顺序
    var sortIds = [];
    $('#container .item').each(function(){
      sortIds.push($(this).attr('id'));
    });

    console.log(sortIds);
    // 在这里可以执行自己的业务逻辑，比如提交排序结果到后台
  });
});

Penjelasan:

• Isihan awal: Mulakan pengisihan bekas dengan memanggil element.sort() function , pada masa ini kedudukan setiap elemen halaman akan ditetapkan. element.sort()函数对容器进行初始化排序，此时每个页面元素的位置将会固定。
• 监听元素位置更新：通过监听elemSort
Dengar kemas kini kedudukan elemen: Anda boleh mendapatkan maklumat kemas kini kedudukan elemen dengan mendengar acara elemSort. Dalam pengendali acara ini, kita boleh mendapatkan susunan elemen yang diisih dan melaksanakan logik perniagaan kita sendiri.

3. Demonstrasi Kesan

Buka penyemak imbas dan muatkan fail HTML Anda kini boleh cuba menyeret elemen halaman untuk mengisihnya. Apabila anda menyeret elemen halaman ke lokasi baharu, konsol akan mencetak susunan unsur yang diisih.

Nota:

• Bekas elemen halaman mesti mempunyai atribut id.
• Elemen halaman mesti mempunyai pengecam unik yang ditambahkan padanya.

Kesimpulan:

Melalui langkah di atas, kami berjaya menggunakan Layui untuk melaksanakan fungsi pengisihan elemen halaman boleh seret. Saya harap artikel ini membantu anda, jika anda mempunyai sebarang pertanyaan sila hubungi saya. Terima kasih kerana membaca!

Rujukan:

• Layui Dokumen: https://www.layui.com/doc/

#🎜🎜#

Atas ialah kandungan terperinci Cara menggunakan Layui untuk melaksanakan fungsi pengisihan elemen halaman boleh seret. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!