Material Design 下如何实现看板效果-FunTeaLearn Online Web Tutorials

本文主要介绍如何在 Material Design 中使用 CSS 和 JavaScript 实现看板效果，希望对前端开发者有所帮助。

前置知识

在开始学习如何实现看板效果之前，需要对以下知识有一定的了解：

Material Design：Google 设计的一种视觉风格和设计语言，主要体现在移动端和 Web 应用上。
CSS：层叠样式表，用于定义 Web 页面的样式。
JavaScript：一种脚本语言，用于给 Web 页面添加交互功能。

看板效果简介

看板效果是指将一些卡片或任务按类别分组，以便更好地组织和管理。通常使用栅格布局呈现，每个卡片都有独立的容器。

例如，一个任务管理应用可以使用看板效果展示多个任务列表，每个列表代表一个任务状态（如待办、进行中、已完成等），用户可以拖拽卡片（代表一个具体的任务）在不同的列表之间移动，实现简单的任务流程控制。

实现步骤

接下来我们将逐步讲解如何使用 HTML、CSS 和 JavaScript 实现看板效果。

HTML 结构

在 HTML 中，我们需要定义一个父容器（例如 div）来包裹所有卡片（也就是任务）所在的容器。这个容器一般称为“看板”，每个任务则被称为“卡片”。

例如：

// www.javascriptcn.com code example
<div class="board">
  <div class="list">
    <div class="card">任务 1</div>
    <div class="card">任务 2</div>
  </div>
  <div class="list">
    <div class="card">任务 3</div>
  </div>
  <div class="list">
    <div class="card">任务 4</div>
    <div class="card">任务 5</div>
    <div class="card">任务 6</div>
  </div>
</div>

其中，.board 是看板容器类名，.list 是每个任务列表容器类名，.card 是每个卡片容器类名。

CSS 样式

在 CSS 中，我们需要定义看板、任务列表和卡片容器的样式。

首先，我们需要使用 Flexbox 布局来实现任务列表的水平排列和卡片的垂直排列：

// www.javascriptcn.com code example
.board {
  display: flex;
}

.list {
  display: flex;
  flex-direction: column;
  margin: 0 8px;
}

接着，我们需要设置卡片容器的基本样式，例如颜色、边框、宽度、高度等：

// www.javascriptcn.com code example
.card {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
  width: 100%;
  height: 80px;
  margin-bottom: 8px;
  padding: 8px;
  transition: all 0.3s ease;
}

这里我们使用了阴影和过渡等特效来美化卡片的样式，使其更加生动。

最后，我们需要为每个任务列表和卡片容器定制不同的颜色（通常应用于不同的任务状态）。我们可以使用 background-color 等样式来实现：

// www.javascriptcn.com code example
.list:nth-child(1) {
  background-color: #e6ee9c;
}

.list:nth-child(2) {
  background-color: #ffcc80;
}

.list:nth-child(3) {
  background-color: #a7ffeb;
}

.card[draggable="true"] {
  cursor: move;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14),
    0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

其中，我们使用了伪类:nth-child() 来为每个任务列表和卡片容器设置不同的背景颜色（这里只是举例，实际应用中可以根据实际情况自定义颜色）。

此外，我们还为拖拽卡片设置了一个 cursor: move 属性，以便更好地提示用户当前的操作状态。

JavaScript 逻辑

最后，我们需要使用 JavaScript 为卡片容器添加拖拽功能，并实现卡片在不同列表之间的移动。

我们可以使用 HTML5 提供的 draggable 属性和 drag 和 drop 事件来实现。

例如：

// www.javascriptcn.com code example
const cards = document.querySelectorAll('.card')

function onDragStart() {
  this.style.opacity = '0.4'
}

function onDragEnd() {
  this.style.opacity = '1.0'
}

function onDragOver(e) {
  e.preventDefault()
}

function onDrop() {
  this.appendChild(card)
}

cards.forEach(card => {
  card.addEventListener('dragstart', onDragStart)
  card.addEventListener('dragend', onDragEnd)
})

const lists = document.querySelectorAll('.list')

lists.forEach(list => {
  list.addEventListener('dragover', onDragOver)
  list.addEventListener('drop', onDrop)
})

其中，onDragStart 和 onDragEnd 函数用于设置拖拽卡片的透明度，onDragOver 函数用于设置拖拽放置的位置，onDrop 函数用于实现卡片在不同列表之间的移动。

最后，我们使用 forEach() 方法将以上函数绑定到每个卡片和任务列表容器上，以实现拖拽功能。

示例代码

最终的示例代码如下所示：（请注意，这里只是演示用的示例代码，实际应用中可以根据具体情况进行适当修改。）

// www.javascriptcn.com code example
<div class="board">
  <div class="list">
    <div class="card" draggable="true">任务 1</div>
    <div class="card" draggable="true">任务 2</div>
  </div>
  <div class="list">
    <div class="card" draggable="true">任务 3</div>
  </div>
  <div class="list">
    <div class="card" draggable="true">任务 4</div>
    <div class="card" draggable="true">任务 5</div>
    <div class="card" draggable="true">任务 6</div>
  </div>
</div>

<style>
  .board {
    display: flex;
  }
  .list {
    display: flex;
    flex-direction: column;
    margin: 0 8px;
    background-color: #eee;
    padding: 8px;
  }
  .card {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.24);
    width: 100%;
    height: 80px;
    margin-bottom: 8px;
    padding: 8px;
    transition: all 0.3s ease;
  }
  .list:nth-child(1) {
    background-color: #e6ee9c;
  }
  .list:nth-child(2) {
    background-color: #ffcc80;
  }
  .list:nth-child(3) {
    background-color: #a7ffeb;
  }
  .card[draggable='true'] {
    cursor: move;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 17px 2px rgba(0, 0, 0, 0.14),
      0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  }
</style>

<script>
  const cards = document.querySelectorAll('.card')

  function onDragStart(e) {
    e.target.style.opacity = '0.4'
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData('text/plain', null)
  }

  function onDragEnd(e) {
    e.target.style.opacity = '1.0'
  }

  function onDragOver(e) {
    e.preventDefault()
  }

  function onDrop(e) {
    const card = document.querySelector('.dragging')
    this.appendChild(card)
  }

  cards.forEach(card => {
    card.addEventListener('dragstart', onDragStart)
    card.addEventListener('dragend', onDragEnd)
  })

  const lists = document.querySelectorAll('.list')

  lists.forEach(list => {
    list.addEventListener('dragover', onDragOver)
    list.addEventListener('drop', onDrop)
  })
</script>

总结

在本文中，我们介绍了如何在 Material Design 中使用 HTML、CSS 和 JavaScript 实现看板效果。希望这篇文章能够帮助你理解看板效果的基本实现原理，并为你日后构建任务管理、项目管理等应用提供参考。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/649fe02748841e9894c3b6d6

Material Design 下如何实现看板效果