使用js写一个简易拖拽模块

针对于拖拽问题，不得不先了解几个必要的事件：

在拖动目标上触发事件

释放目标时触发的事件

这里需要注意的是，若想使用以上的事件，需要使用 HTML5 中的draggable 属性，让元素可拖动。

以上几种事件，我自己做了几次试验：
1.ondragstart

2.ondrag

3.ondragend

4.ondragenter
5.ondragover
6.ondragleave

7.ondrop

对于拖拽问题，还有几个函数需要我们掌握：
dataTransfer.setData()
语法：void dataTransfer.setData(format, data)
参数：
Format：表示要添加到 拖动对象的拖动数据类型。
Data：表示添加到拖动对象的数据
返回值无。

dataTransfer.getData()
语法：dataTransfer.getData(format)
参数：
Format：表示要添加到拖动对象的拖动数据类型。

一般两个配套使用

默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理:event.preventDefault();

<div id="one" ondrop="onDrop(event)" ondragover="onDragover(event)">
<p id="draptarget" style="cursor: pointer" draggable="true" ondrag="onDrag(event)" ondragstart="onDragStart(event)">拖拽我！</p>
</div>
<div id="two" ondrop="onDrop(event)" ondragover="onDragover(event)"></div>
<p id="text"></p>

<style type="text/css">
	div{width: 100px;height: 35px;border: 1px solid #aaaaaa;margin: 15px;
	padding: 10px;float: left;}
</style>

<script type="text/javascript">
	var text=document.getElementById("text");
	function onDragStart(){
		event.dataTransfer.setData("Text",event.target.id);
	}
	function onDrag(event){
		event.preventDefault();
		text.innerHTML="p元素正在被拖动！";
	}
	function onDragover(event){
		event.preventDefault();
	}
	function onDrop(event){
		event.preventDefault();
		var data=event.dataTransfer.getData("Text");
		event.target.appendChild(document.getElementById(data));
		text.innerHTML="p元素已经被拖动！";
	}
</script>

效果图：