H5 的 Draggable 属性

HTML5提供专门的拖拽与拖放的API，

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：< li draggable="true"> aaaa</li> 否则不会有效果

二、相关重点

dataTransfer 对象：拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。在 event对象下
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，
//drag的顺序：
1. ondragstart 　　事件: 当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
2. ondrag 　　事件: 在dangstart 和 dargend 之间发生的，此事件作用在被拖曳元素上
3. ondragenter 　　事件: 拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
4. ondragover 　　事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
5. ondrop 　　事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
6. ondragleave 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上 (一般有了 drop就没有dragleave 事件 )
7. ondragend 　　事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
event.dataTransfer.effectAllowed 属性：就是拖拽的效果，拖拽时光标的样式。
evnet.dataTransfer.setDragImage(odiv,0,0); 拖拽时的影像是 odiv ，鼠标指在odiv的 0，0处（左上角）

解决Firefox 浏览器下的问题：

必须设置 dataTransfer 对象的setData方法才能拖拽图片以外的其他标签

dataTransfer.setData() 方法设置被拖数据的数据和值（key和 value）必须是字符串， dataTransfer.getData() 方法根据 key 获取value的值

下面是一个简单的例子：

<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
	li{
		height: 20px;
		 100px;
		background: #e3f;
		margin: 20px;
		list-style: none;
	}

	div{
		margin-top: 200px;
		 100px;
		height: 100px;
		background: red;
	}
	</style>
	<title>ni</title>
	<script type="text/javascript">
	window.onload = function(){
		var j = 0;
		var ul = document.getElementsByTagName("ul")[0];
		var lis = document.getElementsByTagName("li");
		var put = document.getElementById("put");
		for (var i = 0; i < lis.length; i++) {
			lis[i].index = i;
			
			lis[i].ondragstart  = function(ev){
				var ev = ev||window.evnet;
				ev.dataTransfer.setData("index",this.index);
				this.style.backgroundColor = "#9f9";
			}

			lis[i].ondrag = function(){
				this.style.backgroundColor = "#ff9";
			}

			lis[i].ondragend = function(){
				this.style.backgroundColor = "#931";
			}

		};

		put.ondragenter = function(){
			this.style.backgroundColor = "black";
		}

		put.ondragover = function(ev){
			ev.preventDefault();
			this.style.backgroundColor = "blue";		
		}

		put.ondragleave = function(){
			this.style.backgroundColor = "#931";		
		}

		put.ondrop = function(ev){
			var ev = ev || window.evnet;
			this.style.backgroundColor = "#999";			
			ev.target.appendChild(lis[ev.dataTransfer.getData("index")]);			
			//ul.removeChild(lis[ev.dataTransfer.getData("index")]);  加了这句话反而出问题，appendChild(e) 就是剪切的，当添加了子元素 e 后，会把原来的元素 e 给删除了
			for (var i = 0; i < lis.length; i++) {
						lis[i].index = i;
					};		
		}
	}

	</script>
</head>
<body>
	<ul>
		<li draggable="true">aaaaa</li>
		<li draggable="true">bbbbb</li>
		<li draggable="true">ccccc</li>
	</ul>
	<div id="put"></div>
</body>