前言
最近在学习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
}]
<