拖拽的HTML,[网页设计]HTML5拖拽功能drag

[网页设计]HTML5拖拽功能drag

0 2015-08-05 23:00:08

1.创建拖拽对象

给需要拖拽的元素设置draggable属性，它有三个值：

true：元素可以被拖拽；

false：元素不能被拖拽；

auto： 浏览器自己判断元素是否能被拖拽。

2.处理拖拽事件

当我们拖拽对象的时候会触发拖拽事件包括：

A.dragstart：当元素拖拽开始触发；

B.drag：在元素拖拽过程中触发；

C.dragend：元素拖拽结束时触发

3.创建投放区

①当拖拽对象进入投放区的时候会触发相关的事件

A.dragenter：当拖拽对象进入投放区时触发； B.dragover：拖拽对象在投放区内移动时触发； C.dragleave：拖拽对象没有投放到投放区，离开投放区的 时候触发；

D.drop：拖拽对象投放在投放区时触发。

②注意：dragenter、dragover可能会受到默认事件的影 响，所以我们在这两个事件当中使用 e.preventDefault();来阻止事件默认事件

4.使用dataTransfer传递数据

当我们需要拖拽对象向投放区传递数据的时候用到 dataTransfer有下面的属性和方法：

1.types：返回数据的格式； 2.getData()：返回指定格式数据； 3.setData(, )：设置指定格式数据；