使用 Web Components 实现可拖拽排序功能的教程-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 技术的不断发展，开发者们有了越来越多的选择。Web Components 作为构建可复用定制化组件的标准，早已经被广泛应用在各类应用程序中。本文将向大家介绍如何使用 Web Components 技术实现可拖拽排序的功能。

实现思路

我们将使用两个组件来实现这个功能：

sortable-container：使包含这个组件的 DOM 元素可以成为 sortable-item 的拖拽容器
sortable-item：可以被拖拽排序的元素

sortable-container 组件的主要任务是监听 sortable-item 的 dragstart 和 dragend 事件，以及根据 sortable-item 的位置确定拖拽的目标位置。而 sortable-item 组件则负责实现拖拽行为和位置确定逻辑。

现在让我们一步一步地实现这个功能。

步骤一：创建 sortable-container 组件

首先，我们需要创建 sortable-container 组件。代码如下：

// javascriptcn.com 代码示例
<!-- sortable-container.html -->
<template>
  <slot></slot>
</template>

<script>
  class SortableContainer extends HTMLElement {
    constructor() {
      super();
      
      // 拖拽目标位置
      this.targetIndex = null;
      
      // 监听 dragover 事件以确定目标位置
      this.addEventListener('dragover', e => {
        e.preventDefault();
        const {target} = e;
        const closestTarget = target.closest('sortable-item');
        if (closestTarget && closestTarget.parentElement === this) {
          const bounds = closestTarget.getBoundingClientRect();
          if (e.clientY - bounds.top > bounds.height / 2) {
            // 将目标索引设为 closestTarget 的下一个元素索引
            this.targetIndex = [...this.children].indexOf(closestTarget) + 1;
          } else {
            // 将目标索引设为 closestTarget 的索引
            this.targetIndex = [...this.children].indexOf(closestTarget);
          }
        }
      });
      
      // 监听 dragend 事件以更新位置
      this.addEventListener('dragend', e => {
        e.preventDefault();
        if (this.targetIndex !== null) {
          const movedItem = document.querySelector('.dragging');
          this.insertBefore(movedItem, this.children[this.targetIndex]);
        }
        this.targetIndex = null;
      });
    }
  }
  
  customElements.define('sortable-container', SortableContainer);
</script>

这个组件继承自 HTMLElement，使用了模板和脚本创建。其中，实例化后我们为它打上了 targetIndex 标记，以便我们知道正在拖动的 sortable-item 要移动到哪个位置上。

我们监听了可拖拽元素的 dragover 和 dragend 事件。当鼠标 pointer 在 sortable-container 区域内移动时，dragover 事件会不停被触发。在这个事件中，我们通过 closest() 方法找到了鼠标指针所在的 sortable-item 元素，并通过元素的位置和鼠标指针位置的比较，确定了目标位置的索引值 targetIndex。

dragend 事件在 sortable-item 被拖动完毕时被触发。这里我们将目标元素（即正在被拖动的 sortable-item）移动到了目标索引处。

步骤二：创建 sortable-item 组件

接着，我们需要创建 sortable-item 组件。这个组件继承自 HTMLElement，代码如下：

// javascriptcn.com 代码示例
<!-- sortable-item.html -->
<template>
  <style>
    :host {
      display: block;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }

    .handle {
      display: inline-block;
      cursor: grab;
    }
  </style>

  <div class="handle" draggable="true">
    <slot></slot>
  </div>
</template>

<script>
  class SortableItem extends HTMLElement {
    constructor() {
      super();

      this.addEventListener('dragstart', e => {
        e.dataTransfer.effectAllowed = 'move';
        e.currentTarget.classList.add('dragging');
      });

      this.addEventListener('dragend', e => {
        e.currentTarget.classList.remove('dragging');
      });
    }
  }

  customElements.define('sortable-item', SortableItem);
</script>

SortableItem 组件也使用了模板和脚本创建。其中，我们定义了一个含有样式的 handle 标签来代表 sortable-item。这个 handle 标签是拖拽操作的入口点，并将包含它的元素作为一个整体来拖动。

拖拽操作时，dragstart 事件被触发。我们通过设置 dataTransfer.effectAllowed 属性来设置这个拖动的行为方式。同时，给 sortable-item 加上 dragging 类名来表示可拖动状态。

dragend 事件被拖动包含它的元素被拖动到其他容器或其他位置时触发，告知我们拖动完成。我们在这里取消了 dragging 类名。

步骤三：创建和使用 sortable-container 和 sortable-item 组件

在这个步骤中，我们将使用我们之前创建的两个组件来实现拖拽排序功能。代码如下：

<!-- sortable.html -->
<sortable-container>
  <sortable-item>1</sortable-item>
  <sortable-item>2</sortable-item>
  <sortable-item>3</sortable-item>
  <sortable-item>4</sortable-item>
  <sortable-item>5</sortable-item>
</sortable-container>

可以看到，使用创建的组件非常简单。我们将 sortable-item 组件包含到 sortable-container 组件中，这样 sortable-container 即可作为 sortable-item 的拖拽容器。

总结

使用 Web Components 技术实现拖拽排序功能并不难，只要通过合理地拆分组件，就可以轻松完成这一功能。除了拖拽排序功能，Web 组件技术还能帮助我们构建隔离化的、可复用的组件。希望大家在工作和学习中加强对 Web 组件的研究和应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6527ed3c7d4982a6eba81283