js拖拽事件

javascript 事件之拖拽事件

首先，在了解拖拽事件之前我们先了解一下，拖拽事件都会用到哪些知识。
在拖拽目标上发生的事件（源元素）

ondragstart	用于元素开始被拖拽
ondrag	元素正在被拖拽
ondragend	用户完成拖拽事件后

释放目标后发生的事件:

ondragenter	当鼠标拖动目标对象进入到目标容器中触发该事件
ondragover	当某对象在另一个容器中被拖拽时触发该事件（已经从被拖拽进来，又开始被拖拽）
ondragleave	当鼠标拖动元素离开其容器时触发该事件
ondrop	在鼠标拖动过程中释放鼠标后触发事件

这是拖拽事件的基本知识点，下面我们根据具体事例进行演练

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript事件篇之拖拽事件</title>
		<style type="text/css">
			.dragtarget
			{
				width: 200px;
				height: 100px;
				text-align: center;
                  border: 1px solid #000;
				  float: left;
				  margin: 10px 10px;
			}
		</style>
		<script type="text/javascript">
			function dragStart(event)
			{
				event.dataTransfer.setData("Text",event.target.id);//当开始拖拽时获取目标元素id
			}
			function dragging(event)
			{
				document.getElementById('demo').innerHTML="文本内容正在被拖动";
			}
			function allowdrag(event)
			{
				event.preventDefault();
			}
			function drop(event)
			{
				event.preventDefault();
				var data = event.dataTransfer.getData("Text");
				event.target.appendChild(document.getElementById(data));
				document.getElementById("demo").innerHTML="文本已经到另一个容器中";
			}
		</script>
	</head>
	<body>
		<p>下面有两个div容器</p>
		<div class="dragtarget" ondragover="allowdrag(event)" ondrop="drop(event)">
			<p draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)" id="con">我是内容</p>
		</div>
		<div class="dragtarget" ondragover="allowdrag(event)" ondrop="drop(event)">
			
		</div>
		<p id="demo"></p>
	</body>
</html>

具体介绍：
首先，html部分简单的布局了两个div容器，其中一个div中容纳了一个p标签，第一个div中的p标签中要写上id，下面会讲解为什么会加上id，并且给改元素加上draggable属性，将其设置为true，（意思是将该元素设置为可拖动），我们试想一下，p标签好比是我们，容器是火车站，当我们开始拖拽目标元素时，就是用到dragstart，他需要获取到该元素的具体信息，也就是id和元素类型，用到了,event.dataTransfer.setData(),其中dataTransfer是数据传输，传输的内容用setData来设定（format，id）这时用到id，因为id是我们获取信息的标识，这就是火车站里面的站牌信息，什么时候开始上车，当我们了解到站台信息时开始上车。
那另一个容器就是目的地，我们下车时也需要过安检，看看人家能否让你通过，这时就用到了preventDefault（）方法，（不阻止默认动作），当鼠标松下时我们允许他放置，这时就用到了ondrop（）。放下时我们需要在另一个容器中添加目标元素，appendchild（添加一个子节点）
具体演示：