使用 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中文网其他相关文章！