前言
可拖拽的标签页组件已经在许多现代应用程序中被广泛使用，它们可以将多个内容单元组织成一个视觉上自然的方式，并允许用户轻松地对它们进行重新排序和组合。Custom Elements 提供了一种构建完全自定义的标签和组件的方式，而拖拽模块则允许添加拖放功能，从而提供了实现这些功能的优秀途径。
在这篇文章中，我们将讨论使用 Custom Elements 实现可拖拽的标签页组件的最佳实践，并带您了解如何使用示例代码来创建您自己的标签页组件。
Custom Elements 是什么？
Custom Elements是Web标准中的一部分，为Web开发人员提供了一种定义关键字元素的方法。这些元素可以是自定义样式以及行为（事件处理程序，方法等），并可以在DOM中像任何其他HTML元素一样使用。
如何定义自定义元素
要定义自定义元素，我们需要使用“customElements”这个全局销售点。使用customElements.define()方法来定义自定义元素：
class CustomTag extends HTMLElement {
// 在这里定义您的元素行为
}
customElements.define('custom-tag', CustomTag);上述代码定义了一个名为CustomTag的新HTMLElement类，并告诉浏览器将此元素映射到<custom-tag>标记。此外，我们还可以在定义中传递一个配置对象，其中包含有关自定义元素的其他设置，例如定义与继承元素，styles，观察者等。
在定义自定义元素后，我们可以将其作为任何其他标准元素添加到HTML中。例如，我们可以将 defined 元素添加到一个已存在的 DOM 节点中，如下：
const element = document.createElement('custom-tag');
document.body.appendChild(element);现在，CustomTag的实例已经在文档中存在了，我们可以根据需要更新或操纵它。
添加拖放功能
拖放的工作原理与以下事件结合使用：
dragstart：当前拖动的对象开始时触发，我们需要在其中设置数据传输的数据类型dragover：当鼠标移动到接收拖动对象的区域时，会定期触发，我们在其中检查拖动对象的类型drop：当拖动对象在容器上释放时触发，我们在其中执行放置操作
让我们看一下如何应用这些事件来创建一个拖放标签页组件：
<custom-tabs> <custom-tab></custom-tab> <custom-tab></custom-tab> <custom-tab></custom-tab> </custom-tabs>
我们定义了一个自定义元素<custom-tabs>，该元素可以容纳多个<custom-tab>元素。我们将在后面的示例中定义<custom-tab>元素的行为。
首先，让我们关注<custom-tabs>元素。我们需要为其添加属性支持拖放，我们可以通过监听dragover和drop事件来实现：
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------------- -
--------
-------------------------------- -- -
------------------------------- ------
----------------------------------- ---------------------------------
---------------------------------- --------------------------------
------------------------------ ----------------------------
---
-
---------------------- -
---------------------------------------- -----------------
-
--------------------- -
-----------------------
-
----------------- -
-----------------------
----- -- - -----------------------------------------
----- ------ - ----------------------------
----- -------- - --------------------
----- ------ - ---------------------------------- ---------------
----------------------------- --------
-
------------------------------ -- -
----- -------- - ------------------------
------ ------------------------- ------ -- -
----- --- - ------------------------------
----- ------ - - - ------- - ---------- - --
-- ------- - - -- ------ - --------------- -
------ - ------- ------- -------- ----- --
- ---- -
------ --------
-
-- - ------- ------------------------ -----------
-
-
------------------------------------ ------------我们在上面创建了一个CustomTabs类，它在构造函数中需要遍历所有子元素。我们使用setAttribute()为每个子元素添加了draggable="true"的属性。我们还在每个元素上注册了三个拖放事件监听器：dragstart, dragover, and drop，这些事件每个都都将在上面被实现（下面提到）。在<custom-tabs>元素上声明event.preventDefault()和设置DataTransfer实例。
接下来，通过实现各自的事件监听器，我们可以实现相应的拖拽事件。
handleDragStart 在拖动开始时，由拖动源调用。在这个函数中，我们要设置传输的数据类型，以便在结束放置时可以访问相应的数据。
handleDragOver 在拖动源在目标元素上方移动时定期触发。我们需要将这里的event.preventDefault()调用放置在每个拖动事件处理程序中，以确保目标元素上的默认操作不会被触发。
handleDrop 在拖动源在目标元素上释放时触发。我们要从存储的数据类型中提取当前拖动对象的ID，并利用该ID获取对该元素的引用。我们还需要在响应中的拖动源和目标元素之间重新排列拖动对象。
getDragAfterElement 上述函数是原作者 Vojta Holik 所创建的函数示例，我们将这个函数添加到handleDrop()中，它用于遍历目标元素的子节点，并找到拖动之后应该放置的位置。
现在，让我们看一下如何在<custom-tab>元素上添加样式和交互性，以使其与我们的拖放容器交互。
<custom-tab>Tab 1</custom-tab>
我们使用了从<button>元素继承下来的常见标签标记，但也可以通过为<custom-tab>元素添加属性或在构造函数中定义自己的样式来自定义多个子节点的外观，交互特性或行为。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----------------------- ------------------------------- - ---------
--------------------------
------------------------------ ------
---------------------------------- ---------------------------------
--------------------------------- --------------------------------
----------------------------- ----------------------------
------------------------------ -----------------------------
-
---------------------- -
---------------------------------------- -----------------
----------------------------------------------
-
--------------------- -
-----------------------
-
----------------- -
-----------------------
----- -- - -----------------------------------------
----- ------ - ----------------------------
----- -------- - ----------------------------------
----- ------ - ---------------------------------- ---------------
----------------------------- --------
-
------------------ -
----- ------ - --------------------------------------------
----------------------------------
-----------------------------
-
------------------------------ -- -
----- -------- - ------------------------
------ ------------------------- ------ -- -
----- --- - ------------------------------
----- ------ - - - ------- - ---------- - --
-- ------- - - -- ------ - --------------- -
------ - ------- ------- -------- ----- --
- ---- -
------ --------
-
-- - ------- ------------------------ -----------
-
-
----------------------------------- -----------我们使用构造函数为CustomTabs元素注册了四个拖动事件处理程序，使其能够在拖放操作期间进行交互：
在定义元素时，我们将设置所有新创建对象的id，为每个tab添加CSS class样式表帮助排列填充。我们也让每个拖动源具有draggable属性。还注册四个事件处理程序函数：
handleDragStart 在拖动源按下移动时，由源调用事件。我们需要在事件处理程序中添加正在拖动的CSS类名（以使对象更加突出）并设置传输的数据类型，以便在结束放置时可以访问相关数据。
handleDragOver 定期在拖动源经过当前放置目标元素时由浏览器调用。我们在这里添加了preventDefault()的调用以防止意外的元素操作。
handleDrop 在拖动源放下时以目标元素为参数调用。我们从存储的数据类型中提取当前拖动对象的ID，并利用该ID获取对该元素的引用。我们使用getDragAfterElement函数，并且需要在响应中的拖动源和目标元素之间重新排列拖动对象。
handleClick 标记页在单击时将被激活，我们将这个处理程序用于在激活后重绘之前必须标记所有其他标记页 inactive。
getDragAfterElement 与前面提到的相同，这里不再咕噜。
最佳实践
当使用Custom Elements创建自定义标签或组件时，请记住以下最佳实践：
- 每个元素应该具有一个名称，该名称是唯一的。
- 明晰的命名是非常重要的，使元素容易被识别
- 组件的作用应该容易理解
- 避免与其他库和框架的命名冲突，代码的复用性和可维护性是非常重要的
- 使用小写和中横线作为元素名称——例如
custom-tabs以及custom-tab - 使用JavaScript模板文字和ES6模块以确保代码易于扩展和维护
- 小心使用全局CSS，避免影响其他部分的代码
- 在组件生命周期的不同阶段添加事件监听器，这样就可以确保在这些阶段具有相应的逻辑
结论
在这篇文章中，我们已经了解了如何使用Custom Elements和拖拽模块来创建可拖动标签页组件。
虽然上述代码只是一个工作示例，但它可以帮助您了解如何定义自定义元素，以及如何添加自定义行为和交互特性。随着您对Custom Elements的了解越来越深入，您将能够创建支持更多复杂行为和功能的包装组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672469c52e7021665e135c84