HTM5：拖放_ev.preventdefault拖动-CSDN博客

本文链接：https://blog.csdn.net/dzy21/article/details/51743327

一：单一拖放

<span style="font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#div1{width: 900px;height: 200px;padding: 10px;border: 1px solid #aaaaaa;}
	</style>
	<script type="text/javascript">
		function allowDrop(ev)
		{
			ev.preventDefault();
		}
		function drag(ev)
		{
			ev.dataTransfer.setData("Text",ev.target.id);
		}
		function drop(ev)
		{
			ev.preventDefault();
			var data=ev.dataTransfer.getData("Text");
			ev.target.appendChild(document.getElementById(data));
		}
	</script>
	<body>
		<P>把图片拖放到矩形中</P>
		<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
			
		</div>
		<img id="drag1" src="img/test.png" draggable="true" οndragstart="drag(event)"/>
	</body>
</html>
</span>

代码分析

1）设置元素可拖放

把元素的draggable属性设置为true，元素才可以被拖放。

<img draggable="true" />

2）谁被拖放：ondragstart()和setData()

上面的案例中：drag()函数规定了被拖动的数据，dataTransfer.setData()设置被拖动的数据的数据类型和值。

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在上面案例中：数据类型是“Text”，值是可拖动元素id("drag1")

3)拖放到何处：ondragover

ondragover规定了在何处放置被拖动的数据

ev.preventDefault() 阻止对元素的默认处理

event.preventDefault()

4）进行放置：ondrop

放置被拖动的数据时会发生drop事件

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

二：来回拖放

<span style="font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		#div1,#div2{
			float: left;
			width: 100px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 1px solid #aaaaaa;
		}
	</style>
	<script type="text/javascript">
		function allowDrop(ev){
			ev.preventDefault();
		}
		function drag(ev){
			ev.dataTransfer.setData("Text",ev.target.id);
		}
		function drop(ev){
			ev.preventDefault();
			var data = ev.dataTransfer.getData("Text");
			ev.target.appendChild(document.getElementById(data));
		}
	</script>
	<body>
	<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
		<img id="drag1" src="img/test2.png" draggable="true" οndragstart="drag(event)" />
	</div>
	<div id="div2" οndrοp="drop(event)" οndragοver="allowDrop(event)"></div>
	</body>
</html></span>