HTML5拖放API之回收站效果,Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)...

一、拖放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(p_w_picpath,x,y);

总结：本章内容主要介绍了下 HTML5 拖放API (拖放事件、dataTransfer对象、setDragImage方法)