使用HTML5对网页元素进行拖动

<!DOCTYPE html>
<html>
<head>
<title>Html5DragAndDrop.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<style type="text/css">
div{
	width: 300px;
	height: 200px;
	padding: 10px;
	border: 2px solid #aaaaaa;
}
</style>

</head>

<body>

	<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	
	<p></p>

	
	<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
	

	<!--为了使元素可拖动，把 draggable 属性设置为 true  -->
	<img  id="drag1" src="../images/target.jpg"  draggable="true"
		ondragstart="drag(event)">
</body>

<script type="text/javascript">
	//ondragstart =drag() 定义要拖动的内容
	function drag(ev) {
		//dataTransfer.setData() 方法设置被拖数据的数据类型和值： img是用来标识当前元素的
		ev.dataTransfer.setData("img", ev.target.id);
	}

	/* ondragover 事件规定在何处放置被拖动的数据。
	 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
	这要通过调用 ondragover 事件的 event.preventDefault() 方法：*/
	function allowDrop(ev) {
		ev.preventDefault();
	}

	/*进行放置 - ondrop
	 */
	function drop(ev) {
		ev.preventDefault();
		// dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
		var data = ev.dataTransfer.getData("img");
		//在div内部追加元素
		ev.target.appendChild(document.getElementById(data));
	}
</script>





</html>
使用HTML5对网页元素进行拖动

推荐阅读
