Bagaimanakah cara uni-app sortable.js melaksanakan pengisihan seret dan lepas? Perkongsian langkah

Bagaimana untuk melaksanakan pengisihan seret dan lepas dalam apl uni? Artikel berikut akan memperkenalkan kepada anda cara menggunakan sortable.js untuk melaksanakan pengisihan seret dan lepas dalam apl uni. Saya harap ia akan membantu anda!

uni-app drag and drop sorting

Panduan

Buat satu ini minggu Pada halaman, terdapat fungsi pengisihan aksara yang boleh diseret secara manual untuk menukar kedudukan isihan. Selepas mencari, saya menemui

sortable.js, yang boleh digunakan untuk melaksanakan fungsi seret dan lepas ini.

Fikiran

Apabila melihat sortable.js dokumen rasmi, saya melihat acara onUpdate di dalamnya, selepas menyeret untuk menukar kedudukan , nilai pulangan mengandungi nilai indeks permulaan dan nilai indeks yang diubah Melalui ini, anda boleh menukar kandungan tatasusunan untuk mencapai fungsi menukar kedudukan selepas menyeret.

Langkah

Pasangsortable.js

npm install sortablejs --save-dev

Dapatkan nod

Nod yang diperoleh di sini ialah nod induk senarai seret

let uls = document.getElementById('list')

Memuatkan nod

 new Sortable(uls,{})

Pencetuskan <code><span style="font-size: 18px;">onUpdate</span>onUpdate acara

Kerana dalam proses melakukannya, saya mendapati bahawa jika saya menggunakan nod dom untuk beroperasi Apabila mengubah suai susunan item, pepijat akan berlaku, jadi selepas mencari maklumat, saya akhirnya menemui masalah menggunakan Sortable dalam

Vue, sebelum mengubah suai susunan item, anda harus terlebih dahulu ubah suai nod yang sepadan.

Tukar nod

Padamkan nod yang dialihkan dahulu, kemudian masukkan nod yang dialihkan ke dalam nod asal

newLi = uls.children[newIndex],  //移动节点
oldLi = uls.children[oldIndex];  //原有节点
uls.removeChild(newLi) // 删除移动的节点
uls.insertBefore(newLi, oldLi) // 将移动节点插入到原有节点中

newIndex < oldIndexNota: Kerana Apabila menyeret dari bawah ke atas, nod akan meningkat sebanyak satu, jadi nilai indeks asal akan menjadi kurang satu Apabila oldLi, nod seterusnya bagi nod

digunakan,

uls.insertBefore(newLi, oldLi.nextSibling)

Tukar tatasusunan

Padam tatasusunan asal dan simpan data

let item = _this.items.splice(oldIndex, 1)

Tambah data pada nilai indeks tatasusunan yang tinggal

_this.items.splice(newIndex, 0, item[0])

Lengkap kod

let uls = document.getElementById('list')
    new Sortable(uls, {
      onUpdate: function (event) {
        //获得基础数据
        let newIndex = event.newIndex,
          oldIndex = event.oldIndex,
          newLi = uls.children[newIndex],
          oldLi = uls.children[oldIndex];
        // 删除原有节点
        uls.removeChild(newLi)
        // 将移动的节点插入原有节点中
        if (newIndex > oldIndex) {
          uls.insertBefore(newLi, oldLi)
        } else {
          uls.insertBefore(newLi, oldLi.nextSibling)
        }
        // 修改数组
        let item = _this.items.splice(oldIndex, 1)
        _this.items.splice(newIndex, 0, item[0])
      },

Disyorkan: "tutorial uniapp

"

Atas ialah kandungan terperinci Bagaimanakah cara uni-app sortable.js melaksanakan pengisihan seret dan lepas? Perkongsian langkah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!