Seret&#n&#Drop tanpa kelas CSS menggunakan ObservableTypes

Banyak perpustakaan UI dan rangka kerja CSS digunakan untuk mendayakan fungsi khas dengan menggunakan kelas CSS. Ini amat bergaya pada masa pemalam jQuery.

Walaupun menjadi pilihan yang sangat popular, ia pastinya anti-corak pengaturcaraan.

Hari ini kami mempunyai beberapa cara alternatif. Satu pendekatan dari tanah berfungsi-reaktif memungkinkan untuk hanya "menggabungkan" fungsi ke dalam elemen sedia ada. Tiada kelas CSS, tiada penyalahgunaan atribut id.

Andaikan kita mahu mendayakan drag'n'drop dalam senarai HTML melalui modul boleh guna semula berasingan yang boleh kita tambah atau alih keluar sesuka hati.

  <ul ...${Sortable({onOrderChange: todoList.move})}>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>

Sortable akan dilaksanakan dalam apa yang dikenali sebagai Mixin. Apa yang dilakukannya, ialah mengeksport atribut, gaya, kelas, pengendali acara dalam apa yang dipanggil "DOM Object": apa sahaja yang terkandung di dalamnya, akan digabungkan dalam elemen sasaran.

// sortable.ts
import { Subject, map, withLatestFrom } from 'rxjs';

export const Sortable = ({ onOrderChange }) => {
  const dragStart = new Subject<HTMLLIElement>();
  const drop = new Subject<HTMLLIElement>();

  drop.pipe(
    withLatestFrom(dragStart),
    map(([dropEvt, dragEvt]) => {
      const list = [...dragEvt.target.closest('ol,ul').children];
      return [ list.indexOf(dragEvt.target), list.indexOf(dropEvt.target.closest('li')) ]
    }),
  ).subscribe(([src, dst])=>onOrderChange(src, dst));

  // Export a DOM Object for a framework or UI library
  // to take care of and merge into the target element
  return {
    ondragstart: dragStart,
    ondragover: e=>e.preventDefault(),
    ondrop: drop,
  };
};

Jadi, kod aplikasi akhir akan kelihatan seperti ini:

import { rml } from 'rimmel';

const List = () => {

  return rml`
      <ul ...${Sortable({onOrderChange: todoList.move})}>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
      </ul>
  `;
}

Bermain dengan contoh yang berfungsi sepenuhnya di sini:

Atas ialah kandungan terperinci Seret&#n&#Drop tanpa kelas CSS menggunakan ObservableTypes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!