最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5的拖放 API使用详解
时间:2016-08-14 编辑:简简单单 来源:一聚教程网
在HTML5之前,如果要实现拖放效果,一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果,比较麻烦。而HTML5规范实现了原生拖放功能,使得元素拖放的实现更加方便和高效。
默认情况下,图像、链接和文本是可以拖动的。文本只有在被选中的情况下才能拖动,而图像和链接在任何时候都可以拖动。
HTML5为所有的HTML元素规定了一个draggable属性,表示元素是否允许拖动。要想让其他元素也能被拖动,可以设置这个属性为true。
一. 实现拖放的步骤:
1.1 步骤1:创建一个可拖拽对象:
1.1.1如果想要拖动某个元素,需要设置元素的 draggable 属性为 true。
1.1.2给 dragstart 设置一个事件监听器存储拖拽数据。
document.getElementById("dragImg").addEventListener("dragstart", function(event) {
// 存储拖拽数据和拖拽效果...
event.dataTransfer.setData("Text",ev.target.id);
}, false);
1.2 步骤2:放置对象:
假设放置对象的DOM为:
1.2.1 dragenter事件,用来确定放置目标是否接受放置。
如果放置被接受,那么这个事件必须取消。
document.getElementById("dragTarget").addEventListener("dragenter", function(event) {
// 阻止浏览器默认事件
event.preventDefault();
}, false);
1.2.2 dragover事件,用来确定给用户显示怎样的反馈信息。
如果这个事件被取消,反馈信息(通常就是光标)就会基于 dropEffect 属性的值更新。
document.getElementById("dragTarget").addEventListener("dragover", function(event) {
// 阻止浏览器默认事件
event.preventDefault();
}, false);
1.2.3 最后是drop事件,允许放置对象。
document.getElementById("dragTarget").addEventListener("drop", function(event) {
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}, false);
1.3例子:
(备注: 转载自: http://www.w3school.com.cn/tiy/t.asp?f=html5_draganddrop )
请把 W3School 的图片拖放到矩形中:
二. 拖放的相关事件:
事件 产生事件的元素 描述
dragstart 被拖放的元素 开始拖放操作
drag 被拖放的元素 拖放过程中
dragenter 拖放过程中鼠标经过的元素 被拖放元素开始进入本元素的范围内
dragover 拖放过程中鼠标经过的元素 被拖放元素正在本元素范围内移动
dragleave 拖放过程中鼠标经过的元素 被拖放元素离开本元素的范围
drop 拖放的目标元素 有其他元素被拖放到本元素中
dragend 拖放的对象元素 拖放操作结束
三. DataTransfer对象的属性与方法
3.1 DataTransfer对象的属性:
属性 描述
dropEffect 表示拖放操作的视觉效果,允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果范围内,允许指定的值有:none、copy、link、move。
effectAllowed 用来指定当元素被拖放时所允许的视觉效果。可以指定的值有:none、copy、copyLink、copyMove、link、linkMove、all、uninitialize。
files 返回表示被拖拽文件的 FileList。
types 存入数据的MIME类型。如果任意文件被拖拽,那么其中一个类型将会是字符串”Files”。
方法 描述
void setData(DOMString format, DOMString data) 向DataTransfer对象存入数据。
DOMString getData(DOMString data) 读取DataTransfer对象中的数据。
void clearData(DOMString format) 清除DataTransfer对象中的数据。如果省略参数format,则清除全部数据。
void setDragImage(Element image, long x, long y) 用img元素来设置拖放图标。
-
上一个: 前后端分离实践跨域问题
-
下一个: HTML5的File API使用介绍
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31