html5拖拽事件总结

最新推荐文章于 2024-02-22 16:53:56 发布

雨季～～

最新推荐文章于 2024-02-22 16:53:56 发布

阅读量315

点赞数

分类专栏： html html5拖拽文章标签： html5 拖拽 javaScript

本文链接：https://blog.csdn.net/Terenceno/article/details/100009831

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html5拖拽

2 篇文章 0 订阅

订阅专栏

html5的拖拽是一个比较常见的功能，目前jQuery封装的拖拽插件也比较多，这里我用原声js写一个简单的拖拽demo，主要是便于了解拖拽的原理。希望对初学者有所帮助。

html5拖拽属性：draggable

让div可拖放：<div draggable='true'>

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			#container{width:800px;height:94px;display:flex;margin:0 auto;justify-content:space-between;border:2px solid red;}
			#delete{width:800px;height:94px;display:flex;justify-content:space-between;margin:50px auto 0;border:2px solid green;}
		</style>
	</head>
	<body>
		<div id="container">
			<img src="1.png" id="img1">
			<img src="2.png" id="img2">
			<img src="3.png" id="img3">
			<img src="4.png" id="img4">
		</div>
		<div id="delete">
	
		</div>
	</body>
	<script>
		/**
		 * 在拖动目标上触发事件 (源元素):
		 *		ondragstart - 用户开始拖动元素时触发
		 *		ondrag - 元素正在拖动时触发(鼠标可能在移动也可能未移动)
		 *	    ondragend - 用户完成元素拖动后触发(用户触发拖拽，释放时没有拖拽到目标元素，会触发此事件)
		 *释放目标时触发的事件:
		 * 		ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
		 * 		ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
		 * 		ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
		 * 		ondrop - 在一个拖动过程中，释放鼠标键时触发此事件（需要在这个事件里面完成dom的创建）
		 *浏览器支持：
		 * 		Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
		 *如何在拖动的源对象事件和目标对象事件间传递数据：
		 * 		1、 HTML5为所有的拖动相关事件提供了一个新的属性dataTransfer ：
		 * 		 	e.dataTransfer { }          //数据传递对象
		 *			功能：用于在源对象和目标对象的事件间传递数据
		 *		2、源对象上的事件处理中保存数据：
		 *			e.dataTransfer.setData( key,  value );     //key,value必须都是string类型
		 *		3. 目标对象上的事件处理中读取数据：
		 *			var v = e.dataTransfer.getData( key );
		 * */
		function $(id){return document.getElementById(id);}

		$("container").ondragstart=function (e){
			var evt=e||window.event;
			var src=e.srcElement||evt.target;
			evt.dataTransfer.setData("Text",src.id)
		}
		// 注意：虽然所有元素都支持拖动事件，但这些元素默认是不允许放置的，所以需要阻止事件冒泡和默认事件
		$("delete").ondragover=function(e){
			e.stopPropagation();
			e.preventDefault();
		}

		$("delete").ondrop=function(e){
			var evt=e||window.event;
			var src=e.srcElement||e.target;
			var data=evt.dataTransfer.getData("Text");
			$("delete").appendChild(document.getElementById(data));
		}
	</script>
</html>

雨季～～

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5拖拽事件总结

html5的拖拽是一个比较常见的功能，目前jQuery封装的拖拽插件也比较多，这里我用原声js写一个简单的拖拽demo，主要是便于了解拖拽的原理。希望对初学者有所帮助。html5拖拽属性：draggable 让div可拖放：<div draggable='true'><!doctype html><html> <head>...
复制链接

扫一扫