HTML5新特性 拖拽使用心得
本文主要介绍了拖拽和拖放的几个属性
先构建一个框架
<div id="wrap">
<img id="drag" src="" draggable="true">
<div id="drop" >
<span>目标区域</span>
</div>
</div>
draggable
为了使元素可拖动，将draggable属性设置为true
<img id="drag"
src="b5208ba59f1f064a2d39f991bc1e4dba.jpg"
alt="可拖动的图片"
draggable="true"/>
ondragstart
作用于拖拽元素上，当拖拽元素被拖动的时候触发此事件
<img id="drag"
src="b5208ba59f1f064a2d39f991bc1e4dba.jpg"
alt="可拖动的图片"
draggable="true"
ondragstart="start()"/>
ondragenter
据张鑫旭的文章《HTML5 drag & drop 拖拽与拖放简介
》中描述
ondragenter事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/
目标元素设置
<div id="drop"
ondragenter="enter()">
目标区域
</div>
关于这个属性，在几个主流的浏览器Safari、Chrome、Firefox、Opera下进行了测试。并不是当拖拽元素进入目标元素的时候触发，而是拖拽过程中，作用于拖拽元素上的拖拽点进入目标元素的时候触发。简而言之，就是鼠标位置进入目标元素所在区域，ondragenter事件触发，可触发多次。
ondragleave
作用于目标元素上，拖拽元素上的光标点离开目标区域时触发ondragleave属性。
ondragover
作用于目标元素上，当拖拽元素在目标元素上移动的时候触发。经测试，光标在目标元素区域内移动会触发ondragover事件，当光标落在目标区域外，即使拖拽元素仍在目标区域内，ondragover事件无法触发
<div id="drop"
ondragenter="enter()"
ondragover="over()">
目标区域
</div>
ondrop
作用于目标元素上，当光标在目标区域内，松开鼠标时触发ondrop事件。
<div id="drop"
ondragenter="enter()"
ondragover="over()"
ondrop="letGo()">
目标区域
</div>
注意事项：①需要在ondragover事件中执行preventDefault()阻止默认事件，否则无法触发ondrop事件。②需要配合ondragover事件使用。
ondragend
作用于拖拽元素，拖拽完成时触发
ondragexit
据点点乐淘淘的文章《H5 拖放事件详解》描述
dragexit：当元素不再是拖动操作的直接选择元素时触发（很少使用）http://www.cnblogs.com/diantao/p/6282068.html
（既然不常用就先不研究它啦，需要的时候再补充）
贴一个小demo
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
transition: 2s;
}
#wrap{
width: 400px;
padding: 20px 0;
margin: 0 auto;
background-color: #e8e5e5;
text-align: center;
}
#drop{
position: relative;
width: 300px;
height: 300px;
line-height: 300px;
margin: 0 auto;
border: 1px solid;
text-align: center;
font-size: 30px;
border-radius: 20%;
}
#drag{
border-radius: 20%;
}
#imgWrap{
width: 250px;
height: 221px;
margin: 0 auto;
margin-bottom: 10px;
}
#notice{
position: absolute;
width: 100%
}
.change{
animation: change .1s 10;
/*animation-iteration-count: 10;*/
}
@keyframes change{
0%{
background-color: #fff;
}
100%{
background-color: red;
}
}
</style>
</head>
<body>
<div id="wrap">
<div id="imgWrap">
<img id="drag" src="" draggable="true" ondragstart="start()" ondragend="end()">
</div>
<div id="drop" ondragenter="enter()" ondragleave="leave()" ondragover="over(event)" ondrop="letGo()">
<div id="notice">将图片拖入此处</div>
</div>
</div>
</body>
<script type="text/javascript">
function start() { // 拖拽元素移动的时候触发
drag.style.opacity = 0;
}
function enter() { // 光标进入目标元素区域的时候触发
drop.className = "change";
notice.innerHTML = "";
}
function leave() { // 光标离开目标元素区域的时候触发
drop.style.backgroundColor = "";
drag.style.opacity = 1;
}
function over(ev) { // 光标在目标元素区域内移动的时候触发
ev.preventDefault();
if (drag.style.opacity == 0) {
drop.style.backgroundColor = "red";
}
}
function letGo() { // 光标在目标元素区域内并松开鼠标的时候触发
drag.style.opacity = 1;
drop.style.backgroundColor = "";
}
function end() { // 拖拽结束的时候触发
drop.appendChild(drag);
drag.style.verticalAlign = "middle";
drag.draggable = false;
}
</script>
</html>
（有没有大神教我怎么在代码块内正确的写img标签，我写的发布之后总会变样了，so sad...）
欢迎小伙伴们指正
