撸一个vue项目实现拖拽功能

最近在学习Vue，边做个小demo边学习。其中有一个小功能需要使用到拖放，顺便还学一下拖放。拖放是HTML5的标准，对着教程在普通的页面上很容易就实现了，但是vue中基本都是数据驱动，不推荐直接操作DOM。

HTML拖放API 是一种内置方法，它包含几个事件和属性，但是可以归纳为以两种类型的元素为思路来进行处理。

如果这样分析，将会使分析拖放事件变得更加容易。

API 中有八个拖放事件可以用在我们程序中。

dataTransfer对象

关于拖放 API 最重要的一个知识点时它将 dataTransfer对象添加到事件中。

dataTransfer 对象允许我们在开始拖动元素时设置数据，并在将元素放在拖放区中时访问相同的数据。 我们应该知道一些关于 dataTransfer 的属性和方法（如果要了解更多，请查看dataTransfer API 文档）。

如你所见例子中有两个列表，我们可以在它们之间顺畅地拖放项目。

配置我们的项目

首先，我们必须设置数据。在脚本中，创建一个 item 对象数组，对象的属性有：

这个数组中添加三项：

另外还创建了两个计算属性用来把项目列表过滤为列表1中的项目和列表2中的项目。

创建的模板代码

这是组件的轮廓。该代码将显示所有内容，但没有拖放功能。

组件的样式并不重要。重要的是，即使没有内部元素，你的放置区也必须具有一定的高度，否则，你无法将鼠标悬停在上面！

通过在拖放区样式中添加一些填充来实现。

添加拖放功能

首先在脚本中添加一些方法：一种在开始拖动元素时使用，另一种在拖放元素时使用。

对于 startDrag 方法，我们想使用前面讨论的 dataTransfer 属性存储要拖动的元素的 ID。另外这个拖动事件将是一个动作。

然后在 ondrop 中检索存储的 ID，以便我们可以访问数组中正确的项目。

下面添加模板代码。 首先向事件添加事件。需要使元素可拖动并检测拖动开始事件。

由于添加了 draggable 属性，所以，如果你运行程序，应该可以像这样拖动元素，但是无法将其拖放到任何地方。

让我们给它一个接受可拖动元素的放置区域。先添加调用 onDrop 方法的 drop 事件侦听器。

但是要注意，我们必须在 dragEnter 和 dragOver 这两个拖放 hooks 上调用 preventDefault。

因为在默认情况下，这两种方法不允许删除元素。所以为了使我们的 drop 事件能够正常运行，必须阻止其默认操作才行。

可以用 Vue 内置的 .prevent 事件修改器来完成此操作。

现在运行程序，可以看到一切正常。我们能够在两个不同的列表之间拖放元素。