ObservableTypes を使用した CSS クラスを使用しないドラッグ&#n&#ドロップ

多くの UI ライブラリと CSS フレームワークは、CSS クラスを利用して特別な機能を有効にするために使用されていました。これは、jQuery プラグインの時代に特に流行していました。

非常に人気のある選択肢であるにもかかわらず、これは間違いなくプログラミングのアンチパターンです。

今日はいくつかの代替方法があります。機能反応性ランドからのアプローチの 1 つは、既存の要素に機能を単に「マージ」することを可能にします。 CSS クラスや ID 属性の悪用はありません。

自由に追加または削除できる別の再利用可能なモジュールを使用して、HTML リストでドラッグ アンド ドロップを有効にするとします。

  <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 は、Mixin として知られるもので実装される予定です。これが行うことは、属性、スタイル、クラス、イベント ハンドラーをいわゆる「DOM オブジェクト」にエクスポートすることです。そこに含まれるものはすべて、ターゲット要素にマージされます。

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

最終的なアプリケーション コードは次のようになります:

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

ここで完全に動作する例を試してみましょう:

以上がObservableTypes を使用した CSS クラスを使用しないドラッグ&#n&#ドロップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。