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

前言

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

内置HTML 拖放API

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

• 可拖动元素：可以被拖动的元素
• 可放置元素：可以接受被拖动元素的元素

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

拖放事件

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

• drag：可拖动的项目被拖动
• dragstart：开始拖动可拖动元素
• dragend：拖动结束（例如放开鼠标）
• dragenter ：拖动的项目进入可放置元素
• dragleave –可拖动的项目离开可放置元素
• dragover：可拖动项目在可放置元素上移动（每一百毫秒左右调用一次）
• drop：可拖动项目被放置在可放置元素上

dataTransfer对象

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

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

• dropEffect：当前的拖放操作（例如，移动，复制）
• effectAllowed：指定拖放操作
• setData（name，val）：允许我们向dataTransfer对象添加值
• getData（name）：检索存储的值

创建自己的拖放系统

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

配置我们的项目

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

• id：唯一的 ID，以便我们可以查找对象
• title：要显示文字
• list：它所属的列表。

这个数组中添加三项：

data () {
   
    return {
   
      items: [
      {
   
        id: 0,
        title: 'Item A',
        list: 1
      },
      {
   
        id: 1,
        title: 'Item B',
        list: 1
      },
      {
   
        id: 2,
        title: 'Item C',
        list: 2
      }