本文主要介绍如何在 Material Design 中使用 CSS 和 JavaScript 实现看板效果，希望对前端开发者有所帮助。
前置知识
在开始学习如何实现看板效果之前，需要对以下知识有一定的了解：
- Material Design：Google 设计的一种视觉风格和设计语言，主要体现在移动端和 Web 应用上。
- CSS：层叠样式表，用于定义 Web 页面的样式。
- JavaScript：一种脚本语言，用于给 Web 页面添加交互功能。
看板效果简介
看板效果是指将一些卡片或任务按类别分组，以便更好地组织和管理。通常使用栅格布局呈现，每个卡片都有独立的容器。
例如，一个任务管理应用可以使用看板效果展示多个任务列表，每个列表代表一个任务状态（如待办、进行中、已完成等），用户可以拖拽卡片（代表一个具体的任务）在不同的列表之间移动，实现简单的任务流程控制。
实现步骤
接下来我们将逐步讲解如何使用 HTML、CSS 和 JavaScript 实现看板效果。
HTML 结构
在 HTML 中，我们需要定义一个父容器（例如 div）来包裹所有卡片（也就是任务）所在的容器。这个容器一般称为“看板”，每个任务则被称为“卡片”。
例如：
-- -------------------- ---- -------
---- --------------
---- -------------
---- --------------- -------
---- --------------- -------
------
---- -------------
---- --------------- -------
------
---- -------------
---- --------------- -------
---- --------------- -------
---- --------------- -------
------
------其中，.board 是看板容器类名，.list 是每个任务列表容器类名，.card 是每个卡片容器类名。
CSS 样式
在 CSS 中，我们需要定义看板、任务列表和卡片容器的样式。
首先，我们需要使用 Flexbox 布局来实现任务列表的水平排列和卡片的垂直排列：
-- -------------------- ---- ------- ------ - -------- ----- - ----- - -------- ----- --------------- ------- ------- - ---- -
接着，我们需要设置卡片容器的基本样式，例如颜色、边框、宽度、高度等：
-- -------------------- ---- -------
----- -
----------------- -----
-------------- ----
------- --- ----- -----
----------- - --- --- ------- -- -- ------
- --- --- ------- -- -- ------
------ -----
------- -----
-------------- ----
-------- ----
----------- --- ---- -----
-这里我们使用了阴影和过渡等特效来美化卡片的样式，使其更加生动。
最后，我们需要为每个任务列表和卡片容器定制不同的颜色（通常应用于不同的任务状态）。我们可以使用 background-color 等样式来实现：
-- -------------------- ---- -------
------------------ -
----------------- --------
-
------------------ -
----------------- --------
-
------------------ -
----------------- --------
-
----------------------- -
------- -----
-
----------- -
---------- -----------------
----------- - --- ---- --- ------- -- -- ------
- --- ---- --- ------- -- -- ------ - --- --- ---- ------- -- -- -----
-其中，我们使用了伪类:nth-child() 来为每个任务列表和卡片容器设置不同的背景颜色（这里只是举例，实际应用中可以根据实际情况自定义颜色）。
此外，我们还为拖拽卡片设置了一个 cursor: move 属性，以便更好地提示用户当前的操作状态。
JavaScript 逻辑
最后，我们需要使用 JavaScript 为卡片容器添加拖拽功能，并实现卡片在不同列表之间的移动。
我们可以使用 HTML5 提供的 draggable 属性和 drag 和 drop 事件来实现。
例如：
-- -------------------- ---- ------- ----- ----- - ---------------------------------- -------- ------------- - ------------------ - ----- - -------- ----------- - ------------------ - ----- - -------- ------------- - ------------------ - -------- -------- - ---------------------- - ------------------ -- - ---------------------------------- ------------ -------------------------------- ---------- -- ----- ----- - ---------------------------------- ------------------ -- - --------------------------------- ----------- ----------------------------- ------- --
其中，onDragStart 和 onDragEnd 函数用于设置拖拽卡片的透明度，onDragOver 函数用于设置拖拽放置的位置，onDrop 函数用于实现卡片在不同列表之间的移动。
最后，我们使用 forEach() 方法将以上函数绑定到每个卡片和任务列表容器上，以实现拖拽功能。
示例代码
最终的示例代码如下所示：（请注意，这里只是演示用的示例代码，实际应用中可以根据具体情况进行适当修改。）
-- -------------------- ---- -------
---- --------------
---- -------------
---- ------------ ------------------- -------
---- ------------ ------------------- -------
------
---- -------------
---- ------------ ------------------- -------
------
---- -------------
---- ------------ ------------------- -------
---- ------------ ------------------- -------
---- ------------ ------------------- -------
------
------
-------
------ -
-------- -----
-
----- -
-------- -----
--------------- -------
------- - ----
----------------- -----
-------- ----
-
----- -
----------------- -----
-------------- ----
------- --- ----- -----
----------- - --- --- ------- -- -- ------
- --- --- ------- -- -- ------
------ -----
------- -----
-------------- ----
-------- ----
----------- --- ---- -----
-
------------------ -
----------------- --------
-
------------------ -
----------------- --------
-
------------------ -
----------------- --------
-
----------------------- -
------- -----
-
----------- -
---------- -----------------
----------- - --- ---- --- ------- -- -- ------
- --- ---- --- ------- -- -- ------ - --- --- ---- ------- -- -- -----
-
--------
--------
----- ----- - ----------------------------------
-------- -------------- -
---------------------- - -----
---------------------------- - ------
------------------------------------ -----
-
-------- ------------ -
---------------------- - -----
-
-------- ------------- -
------------------
-
-------- --------- -
----- ---- - -----------------------------------
----------------------
-
------------------ -- -
---------------------------------- ------------
-------------------------------- ----------
--
----- ----- - ----------------------------------
------------------ -- -
--------------------------------- -----------
----------------------------- -------
--
---------总结
在本文中，我们介绍了如何在 Material Design 中使用 HTML、CSS 和 JavaScript 实现看板效果。希望这篇文章能够帮助你理解看板效果的基本实现原理，并为你日后构建任务管理、项目管理等应用提供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649fe02748841e9894c3b6d6