05-HTML5强大的新 API，02-拖放 API

最新推荐文章于 2024-05-06 19:13:09 发布

L鹿先生

最新推荐文章于 2024-05-06 19:13:09 发布

阅读量127

点赞数

分类专栏： HTML5 文章标签： html5 前端 api

本文链接：https://blog.csdn.net/weixin_44077629/article/details/104763147

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML5 API：

1、文件 API （规范与本地文件进行交互的标准方法）

2、拖放 API （提供了直接支持拖放操作的API）

3、地理定位 （获取地理位置信息）

4、web 存储 （在本地存储用户的浏览数据）	

5、Web SQL	（在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写）

6、应用程序缓存 （创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问。）

7、Web Sockets （在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。）

8、SSE	（网页自动获取来自服务器的更新）

9、Web Workers （web worker 是运行在后台的 JavaScript，不会影响页面的性能）

......

2、拖放 API

在html5中提供了直接支持拖放操作的api，虽然html5之前已经可以使用mousedown、mousemove、mouseup来实现拖放操作，但是这只支持在浏览器内部的拖放，而在html5中已经支持在浏览器与其他应用程序之间的数据相互拖动，同时也大大简化了有关拖放方面的代码。
实现拖放步骤：
1、将想要拖放的对象元素的draggable 属性设为true ，这样元素才可以拖放，另外img元素和a元素（必须指定href）默认允许拖放
2、编写与拖放有关的事件处理代码。关于拖放存在的几个事件：
dragstart 开始拖放操作
drag 拖放过程中
dragenter 被拖放的元素开始进入本元素的范围内
dragover 被拖放的元素正在本元素范围内移动
dragleave 被拖放的元素离开本元素的范围
drop 有其他元素被拖放到了本元素中
dragend 拖放元素操作结束

现在支持拖动处理的MIME类型为以下几种：
text/plain ：文本文字
text/html ：HTML文字
text/xml ：XML文字
text/uri-list:URL列表，每个URL为一行

DataTransfer对象的属性和方法：
dropEffect 属性表示拖放操作的视觉效果，允许对其进行值得设定，该效果必须在用effectAllowed属性指定的允许的视觉效果范围内，允许指定值为none、copy、link、move
effectAllowed 属性用来指定当元素被拖放时所允许的视觉效果，可以指定值为none、copy、 copyLink、copyMove、link、linkMove、move、all、unintialize
types 属性存入数据的种类，字符串的维数组

clearData（）清除DataTransfer对象中存放的数据
setData（）向DataTransfer对象存入数据
getData（）从DataTransfer对象中读数据
setDragImage（图像，-10，-10）用img元素来设置拖放图标（部分浏览器中可以用canvas等其他元素来设定）

dropEffect属性 effectAllowed 属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart 中设定，允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许设定的值为none、copy、link、move。dropEffect属性所表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。规则如下所示：
1、如果effectAllowed属性设定为none，则不允许拖放元素
2、如果dropEffect属性设定为none，则不允许被拖动到目标元素中
3、如果effectAllowed属性设定为all或不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。
4、如果effectAllowed属性设定为具体效果（不为none、all），dropEffect属性也设定了具体视觉效果，则两个具体效果值必须完全相等，否则不允许将被拖放元素拖放到目标元素中

例子1：

<body>
	<img src = "bd_logo1.png" id = "img" draggable = "true">
	<div id = "box"></div>
</body>
<script>
var img = document.getElementById("img"),
	box = document.getElementById("box");
	
img.ondragstart = function(e){
	//存储当前元素id
	e.dataTransfer.setData("id", this.id);
};

//3、处理目标容器事件

box.ondragover = function(e){
	//阻止默认事件
	e.preventDefault();
};

box.ondrop = function(e){
	// 阻止默认事件
	e.preventDefault();
	console.log(e);
	var domId = e.dataTransfer.getData("id");
	this.appendChild(document.querySelector("#"+domId));
};

例子2 拖动打开本地文件（图片）：

<body>
	<div id = "box">文件拖动到此处上传</div>
</body>
<script>
//文件拖动到目标区域后，目标容器高亮显示
var box = document.getElementById("box");
//绑定over与leave事件
box.ondragover = function(e){
	this.style.border = "5px dashed red";

	//阻止默认事件
	e.preventDefault();
};

box.ondragleave = function(e){
	this.style.border = "2px solid blue";
	e.preventDefault();
};

//绑定drop事件
box.ondrop = function(e){
	e.preventDefault();
	var file = e.dataTransfer.files[0],              //   !important
		reader = new FileReader();		//  !important
	//读取文件
	reader.readAsDataURL(file);			//  !important
	//监听文件读取完毕
	reader.onload = function(){                        //!important
		box.innerHTML = "<img src="+ this.result +">";
	};
};
</script>

特别注意 :

拖动的元素拒绝被拖放应该在拖动的元素上加上draggable = “true” 貌似不添加也能被拖动

目标容器拒绝被拖放：
在dragover 事件上阻止默认事件：e.preventDefault();
最好也在drop 事件也加e.preventDefault() 还要加上停止事件传播：e.stopPropagation();

参考阅读：

L鹿先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
05-HTML5强大的新 API，02-拖放 API

HTML5 API：1、文件 API （规范与本地文件进行交互的标准方法）2、拖放 API （提供了直接支持拖放操作的API）3、地理定位（获取地理位置信息）4、web 存储（在本地存储用户的浏览数据） 5、Web SQL （在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写）6、应用程序缓存（创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问...
复制链接

扫一扫