`NX.Sortable` — NexaSortable

Name: NxCode IDE
Availability: InStock
Author: NxDOM

Daftar yang bisa diurutkan ulang dengan HTML5 Drag and Drop (dragstart / drop / …). Setelah item dipindah, data-index pada <li> diperbarui, lalu callback opsional dan CustomEvent di document.

Sumber: assets/modules/Dom/NexaSortable.js
NX: NX.NexaSortable dan alias NX.Sortable

Tabel data (sort kolom, bukan drag baris): NX.NexaTables.

Syarat markup

Container — elemen dengan id sama dengan opsi containerId (biasanya <ul> atau <ol>).
Item — setiap baris <li> harus draggable="true".
Nilai urutan — di dalam tiap li, sediakan anak dengan class itemClass (default sortable-item). Urutan string dari atribut value pada elemen itu jika ada, atau textContent yang di-trim. Tanpa node itemClass, dipakai value / teks dari li sendiri.

HTML

<ul id="sortable-list">
  <li draggable="true" data-index="0">
    <span class="sortable-item" value="a">Satu</span>
  </li>
  <li draggable="true" data-index="1">
    <span class="sortable-item" value="b">Dua</span>
  </li>
</ul>

Opsi konstruktor

Opsi	Tipe	Default	Keterangan
`containerId`	`string`	`'sortable-list'`	`id` pembungkus daftar (unik di dokumen)
`itemClass`	`string`	`'sortable-item'`	Class node di dalam `li` untuk label / `value` urutan
`eventKey`	`string`	`'sortableOrder'`	Awalan event: `{eventKey}Reordered`
`logPrefix`	`string`	`'Sortable'`	Awalan `console.log` di `saveNewOrder` / `getCurrentOrder`

Alur pemakaian

JavaScript

const s = new NX.Sortable({
  containerId: "my-list",
  itemClass: "sortable-item",
  eventKey: "myList",
  logPrefix: "MyList",
});

s.onCallback((newOrder) => {
  // newOrder: string[] sesuai urutan DOM
});

s.initSortable();

initSortable() — cari container, ikat listener ke tiap li[draggable="true"], simpan originalData, panggil addStyles().
onCallback(fn) — simpan fungsi; dipanggil di saveNewOrder dengan array baru. Mengembalikan this (chain sebelum initSortable).

Setelah urutan berubah

saveNewOrder(newOrder) (dari updateDataIndexes setelah drop valid):

Log konsol (dengan logPrefix).
Memancarkan di document: new CustomEvent(\`${eventKey}Reordered\`, { detail: { newOrder } })
Memanggil callback jika sudah onCallback.

Contoh: eventKey: 'sortableOrder' → event sortableOrderReordered.

getCurrentOrder() — baca ulang urutan dari DOM, log, kembalikan string[]. Tanpa container → [].

Gaya yang disuntikkan (`addStyles`)

Pada initSortable(), jika belum ada #${containerId}-styles, <style> ditambahkan ke document.head: cursor move untuk .${itemClass} dan li[draggable="true"], kelas .dragging, .drag-over.

Penting: selector li[draggable="true"] di CSS dan di handleDrop global untuk seluruh dokumen, bukan dibatasi ke #containerId. Beberapa daftar atau li draggable lain bisa saling memengaruhi. Untuk isolasi penuh, pertimbangkan CSS tambahan atau satu daftar draggable per halaman.

Metode ringkas

Metode	Keterangan
`initSortable()`	Pasang listener; injeksi style sekali per `containerId`
`onCallback(callback)`	`(newOrder: string[]) => void`; return `this`
`getCurrentOrder()`	Baca urutan dari DOM; log + return array

Tidak ada destroy() resmi: initSortable() berulang pada DOM yang sama menambah listener ganda. Untuk SPA, setelah ganti innerHTML container, node lama hilang — aman buat instance baru dan initSortable() lagi pada markup baru.

Demo di proyek

Rute: /sortable — templates/sortable.js: eventKey: 'nexaSortableDemo' → event nexaSortableDemoReordered, onCallback memperbarui tampilan teks urutan.

Berkas implementasi

assets/modules/Dom/NexaSortable.js · agregasi assets/modules/nxdom.js.

NX.Sortable — NexaSortable