H5API：文件拖放 draggable

最新推荐文章于 2023-11-02 14:23:25 发布

原创最新推荐文章于 2023-11-02 14:23:25 发布 · 210 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #html5 #javascript

本文介绍了HTML5中文件拖放的实现，通过draggable属性设置元素可拖放，利用event.dataTransfer进行数据的保存和读取。详细讲解了源对象的ondragstart、ondrag、ondragend事件以及目标对象的ondragenter、ondragover、ondragleave、ondrop事件，帮助理解拖放操作的整个流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.draggable设置元素是否可拖放在标签内添加属性draggable = 'true'

2.event 全局内容保存 event.dataTransfer.setData(key标记,内容);

3.event 全局内容读取 event.dataTransfer.getData(key标记);

源对象事件：

1.ondragstart 源对象拖动开始=按下拖动

2.ondrag 源对象拖动过程中=被按住过程中持续触发

3.ondragend 源对象拖动结束=松开

目标对象事件：

1.ondragenter 目标对象被源对象拖着进入=拖动进入

2.ondragover 目标对象被源对象拖着停留在上方=拖动进入停留持续触发

3.ondragleave 目标对象被源对象拖着离开=拖动进入后离开

4.ondrop 目标对象被源对象拖着停留松开了鼠标=拖动进入松开鼠标


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>拖放</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 300px;
			border: 1px solid red;
			float: left;
			margin-left: 20px;
		}
		div#div2 {
			border-color: blue;
		}
		div#div3 {
			border-color: green;
		}
		p {
			background: pink;
			margin: 0px;
			padding: 0px;
			text-align: center;
			cursor: pointer;
		}

	</style>
</head>
<body>
	<div id="div1">
		<!-- draggable设置元素是否可拖放 -->
		<p id='p1' draggable='true'>1</p>
		<p id='p2' draggable='true'>2</p>
		<p id='p3' draggable='true'>3</p>
		<p id='p4' draggable='true'>4</p>
	</div>
	<div id="div2"></div>
	<div id="div3"></div>

	<script type="text/javascript">
		//event设置保存全局内容  属性1为设置的内容类型  属性2为内容
		// event.dataTransfer.setData("Text",ev.target.id);
		
		//event读取设置的全局内容 属性1为设置内容的类型  返回内容
		//event.dataTransfer.getData("Text");
		
		//源对象和目标对象用到的只有源对象拖动开始ondragstart 和 目标对象释放结束ondrop
		
		// 源对象事件3个
		// 1.ondragstart  	源对象拖动开始=按下拖动
		document.ondragstart = function(e) {
			// console.log(e.target);
			e.dataTransfer.setData('text/html', e.target.id);
		}
		// 2.ondrag		源对象拖动过程中=被按住过程中 持续触发
		document.ondrag = function(e) {
			// console.log('源对象拖动过程中...');
		}
		// 3.ondragend		源对象拖动结束=松开
		document.ondragend = function(e) {
			// console.log('源对象拖动结束');
		}

		//	目标事件4个
		//	1.ondragenter	目标对象被源对象拖着进入=拖动进入
		document.ondragenter = function(e) {
			// console.log('目标对象被源对象拖着进入');
		}
		//	2.ondragover	目标对象被源对象拖着停留在上方=拖动进入停留  持续触发
		document.ondragover = function(e) {
			// 阻止浏览器默认行为  触发ondrop  阻止方法1.return false 阻止方法2.e.preventDefault	
			e.preventDefault();
			// console.log('目标对象被源对象拖着停留在上方');
		}
		//	3.ondragleave	目标对象被源对象拖着离开=拖动进入后离开
		document.ondragleave = function(e) {
			// console.log('目标对象被源对象拖着离开');
		}
		//	4.ondrop		目标对象被源对象拖着停留松开了鼠标=拖动进入松开鼠标
		document.ondrop = function(e) {		//需要在ondragover阻止默认行为  才能触发
			// console.log('目标对象被源对象拖着停留松开了鼠标');
			let id = e.dataTransfer.getData('text/html');
			if (e.target.tagName == 'DIV') {	//只能拖到div里面
				e.target.appendChild(document.getElementById(id));
			} else if (e.target.tagName == 'P') {	//p元素拖放到父元素div里面
				e.target.parentNode.appendChild(document.getElementById(id));
			}
			
		}
	</script>
		
	
</body>
</html>