如何用Vue实现HTML5拖放API来收集长尾关键词？

本文共计4378个文字，预计阅读时间需要18分钟。

使用拖放API，将可拖动元素添加到HTML，构建包含丰富UI元素的Web应用。本文中，我们将使用Vue.js构建一个简单的看板应用。看板是一种项目管理工具，用户可“拖放任务。”

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

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

设置看板

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

vue create kanban-board

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

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

<template> <div></div> </template> <script> export default { name: 'App', components: {}, }; </script> <style></style>

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