一、拖放API
WEB 拖放
- 在桌面应用程序上,可以将元素从一个位置拖放到另一个位置,但在Web上,开发者没有一种能够实现这种操作的标准技术,从而在Web上去实现这个功能并不太容易
- 在 HTML5 标准中引入了拖放API,从而使我们有可能开发出于桌面应用程序完全相同的 Web应用程序
源元素事件
- 在拖放 API 中引入了一些新的事件,其中有一些元素是由源元素(拖动的元素)触发,称之为源元素事件,另一些事件由目标元素触发(源元素投放的元素)
- 源元素事件:
- dragstart:当拖动操作开始,触发这个事件
- drag: 与mousemove事件相似,它是在源元素发生拖动时触发的
- dragend:当拖动操作结束(无论是否成功)时,源元素就会触发这个事件
目标元素事件
- 下面是目标元素触发的事件
- dragenter: 拖动操作过程中,当鼠标指针第一次进入目标元素区域时,就会触发整个事件
- dragover: 当对象拖动到目标对象时触发
- drop: 当拖动操作在目标元素内执行投放时,目标元素会触发这个事件
- dragleave: 在拖动过程中,当被拖动对象离开目标对象时触发
二、dataTransfer 对象
dataTransfer 对象概述
- dataTransfer 对象提供了对于预定义的剪贴板格式的访问,以便在拖放中使用。它使用自定义处理拖放操作称为可能
- 可以通过 dataTransfer 对象保存拖放过程中各组件所涉及到的数据
dataTransfer 对象获取方法
- 在HTML5中,可以通过事件参数event对象获取 dataTransfer 对象
- 代码如下:
var transfer = e.dataTransfer; function mDragStart(event){ dStart = document.getElementById("start"); dStart.innerHTML = "Drag Start..."; event.dataTransfer.setData("Text","http://www.alibaba.com"); }
dataTransfer 对象方法
- dataTransfer对象提供了一些方法用于在源元素与目标元素中共享数据
- 方法
- setData(type,data):用于声明所发送的数据与类型
- getData(type): 返回指定type的数据
- clearData(type):删除指定类型的数据
type取值:
Text: 保存普通文本
setDragImage()
- setDragImage方法用于在拖放操作过程中,修改鼠标指针所指向的图像
- 语法:
event.dataTransfer.setDragImage(image,x,y);
总结:本章内容主要介绍了下 HTML5 拖放API (拖放事件、dataTransfer对象、setDragImage方法)
本文出自 “技术交流” 博客,谢绝转载!
Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)
原文地址:http://jasonteach.blog.51cto.com/5192112/1758562