HTML5拖拽功能drag_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:39:28
asal
1272 orang telah melayarinya


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(, ):设置指定格式数据;
4.clearData():移除指定格式数据; 5.files:返回已经投放的文件的信息数组。 1.type:文件类型
2.size:文件大小
3.name:文件名

 

编程实例:










HTML5拖拽功能drag_html/css_WEB-ITnose




Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan