HTM5:拖放

一:单一拖放

HTM5:拖放_第1张图片

<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" ondrop="drop(event)" ondragover="allowDrop(event)">
			
		</div>
		<img id="drag1" src="img/test.png" draggable="true" ondragstart="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));
}

二:来回拖放

HTM5:拖放_第2张图片

<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" ondrop="drop(event)" ondragover="allowDrop(event)">
		<img id="drag1" src="img/test2.png" draggable="true" ondragstart="drag(event)" />
	</div>
	<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	</body>
</html></span>



你可能感兴趣的:(html5)