一、拖放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方法)