使用 ObservableTypes 在沒有 CSS 類別的情況下拖放

許多 UI 函式庫和 CSS 框架用於透過求助於 CSS 類別來啟用特殊功能。這在 jQuery 插件時代尤其流行。

儘管是一個非常受歡迎的選擇，但它絕對是一種程式反模式。

今天我們有幾種替代方法。功能反應領域的一種方法使得將功能「合併」到現有元素中成為可能。沒有 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 類別的情況下拖放的詳細內容。更多資訊請關注PHP中文網其他相關文章！