基于vue项目实现简单的拖拽功能

知识点：

draggable：允许元素进行拖拽

@drop：当元素放下到drop元素触发

@dragstart：开始拖元素触发

prevent：拦截默认事件

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
      }]
    }
}

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

computed