Drag&Drop ohne CSS-Klassen mit ObservableTypes

Viele UI-Bibliotheken und CSS-Frameworks ermöglichen die Aktivierung spezieller Funktionen durch den Rückgriff auf CSS-Klassen. Dies war besonders zur Zeit der jQuery-Plugins im Trend.

Obwohl es eine sehr beliebte Wahl ist, handelt es sich definitiv um ein Programmier-Anti-Pattern.

Heute haben wir mehrere alternative Möglichkeiten. Ein Ansatz aus dem funktional-reaktiven Bereich ermöglicht es, Funktionalität einfach in ein vorhandenes Element zu „verschmelzen“. Keine CSS-Klassen, kein Missbrauch von ID-Attributen.

Angenommen, wir möchten Drag & Drop in einer HTML-Liste mithilfe eines separaten wiederverwendbaren Moduls aktivieren, das wir nach Belieben hinzufügen oder entfernen können.

  <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 wird in einem sogenannten Mixin implementiert. Es exportiert Attribute, Stile, Klassen und Ereignishandler in ein sogenanntes „DOM-Objekt“: Was auch immer es enthält, wird im Zielelement zusammengeführt.

// 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,
  };
};

Der endgültige Anwendungscode sieht also etwa so aus:

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

Spielen Sie hier mit einem voll funktionsfähigen Beispiel:

Das obige ist der detaillierte Inhalt vonDrag&Drop ohne CSS-Klassen mit ObservableTypes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!