随着 Web 应用的发展，越来越多的交互要求需要通过拖放实现，因此实现一个可拖放组件显得十分必要。本文将介绍如何使用 Custom Elements 和 TypeScript，结合 Web 组件的思想，来创建一个可以拖放的自定义组件。
前置知识
在阅读本文之前，需要掌握以下技术：
- HTML5 的 Drag and Drop API
- TypeScript 的基本语法
- web 组件的基本概念和使用方法
概述
为了实现可拖放组件，我们需要在组件内部实现以下功能：
- 可以拖动的组件
- 可以作为拖动容器的组件
- 当组件被拖动到容器中时，容器会对组件进行相应的处理
在本文中，我们将尝试使用 Custom Elements 和 TypeScript 来实现这些功能。
创建可拖动组件
首先，我们需要创建一个可以拖动的自定义组件 DraggableElement。这个组件将被用作下面要创建的实际拖放组件的基类。
-- -------------------- ---- -------
----- ---------------- ------- ----------- -
------------- -
--------
---------------------------------- ----------------------
---------------------------------- ----------------------
-------------------------------- --------------------
-
---------------------- ----------- -
-----------------------
--------------- - --------------
--------------- - --------------
--------------- - -----
-
---------------------- ----------- -
-----------------------
-- ----------------- -
----- ------ - ------------- - ----------------
----- ------ - ------------- - ----------------
-------------------- - ----------------------- --------------
-
-
-------------------- ----------- -
-----------------------
-- ----------------- -
--------------- - ------
-
-
-在上面的代码中，我们监听了鼠标的三个事件：mousedown、mousemove 和 mouseup。当用户按下鼠标时，我们记录下当前鼠标的位置，并开始拖动状态；当用户移动鼠标时，我们根据鼠标位置的变化实时更新组件位置；当用户释放鼠标时，拖动状态结束。
现在这个组件已经可以拖动了。接下来，我们需要创建一个实际的可拖放组件，并基于 DraggableElement 组件实现拖放功能。
创建可拖放组件
我们将基于 DraggableElement 组件来创建一个实际的可拖放组件 MyDraggable。
-- -------------------- ---- -------
----- ----------- ------- ---------------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
------ ------
------- ------
----------------- --------
-
--------
---- -----------------------------------
--
-----------------------------------------------------
-
------------------- -
------------------------------ --------
---------------------------------- ----------------------
-
---------------------- ---------- -
---------------------------------------- ---------------
-
-
------------------------------------- -------------在上面的代码中，我们创建了一个自定义组件 MyDraggable，其继承了 DraggableElement 组件的功能，并加入了自己的样式和一些逻辑。
MyDraggable 组件的逻辑是很简单的，主要工作就是在组件初始化时将 draggable 属性设置为 true，并添加一个 dragstart 事件监听器，当用户开始拖动时，会将自定义数据 "MyDraggable" 存入 dataTransfer 对象中。
现在我们已经创建了一个可拖放的组件了。接下来，我们需要创建一个拖放容器，将 MyDraggable 组件拖动至其中，并实现下落效果。
创建拖放容器
我们将基于 Custom Elements 来创建一个拖放容器 MyDropzone。这个容器会监听拖放事件，并在拖放过程中实现下落效果。
-- -------------------- ---- -------
----- ---------- ------- ----------- -
------- -------------- - ----------
------- -------------- ------ - ---- - -----
------------- -
--------
------------------------------ --------
---------------------------------- ----------------------
---------------------------------- ----------------------
--------------------------------- ---------------------
----------------------------- -----------------
-
---------------------- ---------- -
-----------------------
-- ------------------- --- ----- -
------------------ - ---------------------------
-
-------------------------- - --------------------
-
---------------------- ---------- -
-----------------------
-------------------------- - -------------------
-
--------------------- ---------- -
-----------------------
-
----------------- ---------- -
-----------------------
-------------------------- - -------------------
----- ---- - -----------------------------------------
-- ----- --- -------------- -
----- --------- - ---------------------------------------
----------------------------
--- ------- - --
--- ------ ----- -- -------------- -
----- ---- - ------------------------------
------- - ----------------- -------------
-
------------------------- - ------------- ---------------
-
-
-
------------------------------------ ------------在上面的代码中，我们创建了一个自定义组件 MyDropzone，它用于拖放容器。每当一个 MyDraggable 组件进入这个容器时，容器会高亮显示。为了实现这个效果，我们监听了 dragenter 和 dragleave 事件，并根据事件类型设置容器的背景色。
当用户在容器内移动鼠标时，容器会不断地触发 dragover 事件，我们需要阻止默认行为，并在容器上禁用默认的鼠标图标（例如，只显示一个禁止标志）以表明这里是一个有效的拖放目标。
最后，当用户将一个 MyDraggable 组件拖动到容器中并放开鼠标时，容器会添加一个新的 MyDraggable 组件，这个组件将在容器中垂直排列。
示例代码
以下是所有代码的完整示例，可以将其复制到一个 HTML 文件中并在浏览器中打开查看效果。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
------------- -------- - ---------- ---------------
-------
----------- -
-------- ------
------- ---- --
-------- -----
------- --- ----- -----
-
--------
-------
------
-------------
------------------------------------
--------------
--------
----- ---------------- ------- ----------- -
------- ---------- - --
------- ---------- - --
------- ---------- - ------
------------- -
--------
---------------------------------- ----------------------
---------------------------------- ----------------------
-------------------------------- --------------------
-
---------------------- ----------- -
-----------------------
--------------- - --------------
--------------- - --------------
--------------- - -----
-
---------------------- ----------- -
-----------------------
-- ----------------- -
----- ------ - ------------- - ----------------
----- ------ - ------------- - ----------------
-------------------- - ----------------------- --------------
-
-
-------------------- ----------- -
-----------------------
-- ----------------- -
--------------- - ------
-
-
-
----- ----------- ------- ---------------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
----- -
-------- ------
------ ------
------- ------
----------------- --------
------ -----
----------- -------
------------ ------
------- -----
-
--------
---- -----------------------------------
--
-----------------------------------------------------
-
------------------- -
------------------------------ --------
---------------------------------- ----------------------
-
---------------------- ---------- -
---------------------------------------- ---------------
-
-
------------------------------------- -------------
----- ---------- ------- ----------- -
------- -------------- - ----------
------- -------------- ------ - ---- - -----
------------- -
--------
------------------------------ --------
---------------------------------- ----------------------
---------------------------------- ----------------------
--------------------------------- ---------------------
----------------------------- -----------------
-
---------------------- ---------- -
-----------------------
-- ------------------- --- ----- -
------------------ - ---------------------------
-
-------------------------- - --------------------
-
---------------------- ---------- -
-----------------------
-------------------------- - -------------------
-
--------------------- ---------- -
-----------------------
-
----------------- ---------- -
-----------------------
-------------------------- - -------------------
----- ---- - -----------------------------------------
-- ----- --- -------------- -
----- --------- - ---------------------------------------
----------------------------
--- ------- - --
--- ------ ----- -- -------------- -
----- ---- - ------------------------------
------- - ----------------- -------------
-
------------------------- - ------------- ---------------
-
-
-
------------------------------------ ------------
---------
-------
-------总结
上面的代码演示了如何使用 Custom Elements 和 TypeScript 来创建可拖放组件和拖放容器。这种方法是建立在 Web 组件规范之上的，因此具有高度的可扩展性和可维护性。虽然仍然需要掌握一些基本的 Web 技术和 TypeScript 的语法，但我们可以将它们组合起来，使得工作更加高效和简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b5f293add4f0e0ffead063