原生js也可以写拖拽，但是有两点限制：一是不能跨浏览器进行，二是代码繁杂冗余。html5就完美地避开了这两点限制，但是也不是没有缺点，兼容性就没有原生js那么好了。当然，如果不考虑ie，这简直是完美了。
drag兼容性
拖拽条件
实现拖拽需要完成以下两点
- 在拖拽元素上设置**属性：dragable
- dragbale的值有三种：true（可拖拽）、false（不可拖拽）、none（随浏览器处理）
- 设置相关事件
- 拖拽对象：
1.dragstart：按下鼠标时触发
2.drag：按下鼠标持续时触发 (执行多次)
3.dragend：鼠标放开时触发 - 投放区：
1.dragenter:拖动目标且鼠标进入投放区时触发
2.dragover：拖动目标且鼠标移动在投放区时触发（执行多次）
3.dragleave：拖动对象且离开投放区时触发
4.drop：拖动对象且在投放区放开鼠标时触发，要先在dragover上设置禁止默认事件，才会有触发
一般完整的拖拽过程触发事件为：
dragstart->dragenter->dragover->drop->dragend
拖拽小栗子
例子描述： 把一个小方块填充进另一个小方块
- html
<!--拖拽对象-->
<div id="target" draggable="true"></div>
<!--投放区-->
<div id="section"></div>
- css
为了使拖动效果更明显，所以在元素拖动过程中也设置了一些样式
<style type="text/css">
#target{
width: 100px;
height: 100px;
background: #dac1df;
}
#section{
height: 100px;
width: 100%;
border: 1px solid #562356;
margin-top: 35px;
}
//设置元素被拖动时样式
.selected{
border: 1px solid red;
}
</style>
- js
var target = document.getElementById('target');
var section = document.getElementById('section');
target.ondragstart = function(){
target.className = 'selected';
}
section.ondragenter = function (event){
var e = event||window.event
e.preventDefault(); //阻止默认事件
section.style.border = '2px solid #562356 ';//进入投放区显示一些标志性样式
};
section.ondragover = function (event){
var e = event||window.event;
e.preventDefault();
//在投放区阻止默认事件，一是为了在window下的浏览器的鼠标移动样式不显示为禁止，二是为了drop事件能被触发
};
section.ondrop = function(event){
var e = event||window.event;
e.preventDefault();
//拖拽处理
section.appendChild(target);
};
//投放结束，一切样式恢复原状
target.ondragend = function(){
target.className = '';
section.style.border = '1px solid #562356 ';
}
这个小例子展示如何把HTML5拖拽用起来，但是有个问题是，我把别的元素，比如一个元素放进投放区，也会把小方块转移进投放区。这是为什么？
因为在drop事件里没有对拖拽元素进行，那我用target来判断行不？显然不行，因为投放区的鼠标事件都是针对投放区，无法识别拖拽元素，那要如何？
嘻嘻 看下一篇：HTML5拖拽（二）--dataTransfer
