vue是如何直接调用html5,如何在vue中使用HTML 5 拖放API

拖放 API 将可拖动元素添加到 HTML，使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。

在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具，使用户可以从头到尾直观地管理项目。 Trello、Pivotal Tracker 和 Jira 等工具都属于看板应用。

设置看板

运行以下命令创建我们的看板项目：

vue create kanban-board

在创建项目时，该选择只包含 Babel 和 ESlint 的默认预设。

完成后，删除默认组件 HelloWorld ，将 App 组件修改为空，仅包含裸组件模板：

export default {

name: 'App',

components: {},

};

接下来用 Bootstrap 进行样式设置，只需 Bootstrap CSS CDN 就够了。将其添加到 public/index.html 的 head 重。

integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

在看板中构建 UI 组件

看板的样子应该是这样的：

通常看板要有列和卡片。卡片是要执行的单个项目或任务，列用来显示特定卡片的状态。

所以需要创建三个 Vue 组件：一个用于列，一个用于卡片，最后一个用于创建新卡片。

创建 card 组件

先来创建 card 组件。在 /component 目录中创建一个新文件 Card.vue。

把下面的代码添加到组件中：

A Sample Card

export default {};

div.card {

margin-bottom: 15px;

box-shadow: 0 0 5px #cccccc;

transition: all ease 300ms;

background: #fdfdfd;

}

div.card:hover {

box-shadow: 0 0 10px #aaaaaa;

background: #ffffff;

}

这样就创建并设置了卡片组件的样式。不过还没有向组件添加可拖动功能，因为这只是组件的框架。

创建 AddCard 组件

顾名思义，这个组件将负责创建新卡片并将其添加到列中。

在 /components 目录中创建一个 AddCard.vue 文件，并添加以下代码：

class="btn btn-sm btn-info w-100"

v-if="!inAddMode"

@click="inAddMode = true"

>

Add Card

type="text"

name="title"

id="title"

class="form-control"

placeholder="Something interesting..."

v-model="cardData"

/>

Save

Cancel

export default {

data() {

return {

inAddMode: false,

cardData: '',

};

},

methods: {},

};

具体功能将在后面进行构建。

创建 Column 组件

这是最后一个组件，它用来显示卡列表，还会包含 AddCard 组件，以便可以将新卡片直接创建到列中。

在 components 目录中创建一个 Column.vue 文件，并添加以下代码：

Column Name

export default {};

div.column {

padding: 0;

padding-bottom: 15px;

margin: 0 15px;

box-shadow: 0 0 10px #cccccc;

}

div.card-list {

padding: 0 15px;

}

header {

margin-bottom: 10px;

}

header h3 {

text-align: center;

}

现在项目的框架搭好了，接下来先概述