Event types
DragEvent并不是一个单一的事件，它包含了多个事件，这些事件分别是：drag，dragstart，dragenter，dragend，dragover，dragexit，dragleave，drop。
drag：这个事件在元素拖拽的过程中反复触发，每一百毫秒触发一次。这事件的目标元素是被拖的那个元素，该事件可冒泡，可取消默认行为。
dragstart：这个事件在用户开始拖动时触发。这个事件的目标元素是被拖的那个元素，在这些事件中，dragstart事件最先触发。该事件可冒泡，可取消默认行为。
dragenter：这个事件在被拖的元素进入一个合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡，可取消默认行为。
dragover：当被拖的元素在可drop目标范围内移动时反复触发这个事件，一百毫秒触发一次。这个事件的目标元素是这个可drop目标。该事件可冒泡，可取消默认行为。
dragend：当拖拽结束时触发这个事件，这个事件的目标元素是被拖的元素。在这些事件中dragend最后触发。该事件可冒泡，不能取消默认行为。
dragleave：这个事件在被拖得元素离开合法的可drop目标时触发。这个事件的目标元素是这个可drop目标。该事件可冒泡，不能取消默认行为。
dragexit：当一个可drop元素不再是拖拽操作最近的drop目标时触发这个事件。这个事件的目标元素是这个可drop元素。该事件可冒泡，不嫩取消默认行为。
drop：当在可drop目标上松开拖动元素的指针设备时触发这个事件，该事件的目标元素是这个可drop目标。drop事件在dragend事件触发之前触发。这个事件可冒泡，可取消默认行为。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<script type="text/javascript">
document.addEventListener('drag',function(event){
event.target.style.backgroundColor = 'black';
},false);
document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red';
},false);
document.addEventListener('dragend',function(event){
event.target.style.backgroundColor = 'yellow';
},false);
document.addEventListener('dragover',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'blue';
},false);
document.addEventListener('dragenter',function(event){
event.target.style.backgroundColor = 'green';
},false);
document.addEventListener('dragleave',function(event){
event.target.style.backgroundColor = 'pink';
},false);
document.addEventListener('dragexit',function(event){
event.target.style.backgroundColor = 'red'
},false);
document.addEventListener('drop',function(event){
event.preventDefault();
event.target.style.backgroundColor = 'white';
console.log(2);
},false)
</script>
</body>
</html>这些事件的事件对象包含鼠标事件的事件对象的方法与属性。之外还存在一个dataTransfer属性
让元素可拖
在HTML中默认可拖的元素只有image，link及被选择的文本。要让其他元素可拖，需要做下面这三件事：
1.给元素设置一个draggable属性，并且将这个属性的值设置为true
2.在这个元素上添加一个dragstart的事件监听
3.在dragstart的事件监听上通过event.DataTransfer.setData(type,value)设置拖拽数据。
<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
This text <strong>may</strong> be dragged.
</p>如果draggable属性被禁止或者设置为false，那么这个元素不能被拖拽。draggable属性可以在任何属性上设置。当一个元素设置为可拖，在这个元素上点击或拖动鼠标，这个元素里的文本或其他元素不会被选中。当用户开始拖动，dragstart事件会被触发，在dragstart事件中，你能够通过setData()指定拖拽数据，通过setDragImage()指定图片反馈，以及通过设置effectAllowed属性和dropEffect属性指定拖拽效果。拖拽数据是必须指定的，但是图片反馈是拖拽效果不是必须的
拖拽数据
拖拽数据包含两部分信息，分别是数据的类型和数据的值，数据的类型是字符串，数据的值也是字符串形式。 拖拽数据的类型有：text/plain,text/html,image/jpeg,text/uri-list等，还能够自定义类型。
可以多次调用setData()方法设置多个拖拽数据。如下：
var dt = event.dataTransfer;
dt.setData("application/x-bookmark",bookmarkString);
dt.setData('text/uri-list','www.baidu.com');
dt.setData('text/plain','drag data');application/x-bookmark是自定义类型。
如果通过这个方法设置新的类型的数据，那么这个新的拖拽数据会位于拖拽数据列表的尾部，如果设置以及存在的类型的数据，那么新的数据会覆盖旧的数据。
通过getData()能够得到指定类型的拖拽数据
通过clearData()能够清除指定类型的拖拽数据
图片反馈
图片反馈并不是必须设置的，默认它是从拖拽目标上生成的一个半透明图片，并且这个图片在拖拽期间会跟着鼠标移动。你能够通过setDragImage(image,xOffect,yOffect)方法自定义图片反馈。
setDragImage()接受三个参数，第一个参数表示图片引用，第二个和第三个表示图片左上角相对于鼠标指针的位置。单位是像素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test target</title>
<style type="text/css">
#drag{
width:200px;
height:200px;
background-color: aqua;
}
.drop{
width: 300px;
height: 300px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<p id="drag" draggable="true" ondragstart="event.dataTransfer.setData('text/plain','dddd')">
我可以拖动
</p>
<img src="test.jpg" id="img">
<p class="drop"></p>
<script type="text/javascript">
document.addEventListener('dragstart',function(event){
event.target.style.backgroundColor = 'red';
event.dataTransfer.setDragImage(document.getElementById('img'),30,30);
},false);
</script>
</body>
</html>拖拽效果
通过设置effectAllowed和dropEffect可以指定拖拽效果
事件对象的dataTransfer属性
dataTransfer属性是一个DataTransfer对象，在这个属性中保存了拖拽操作过程中的数据，它可能保存一个或者多个数据项。这个属性是只读的。
dataTransfer属性中的标准属性
1.dropEffect
得到当前drag and drop操作的类型，或者设置给当前drag and drop 设置新的类型。这个属性可能取值是none，copy，move，link。这属性会影响拖拽过程中的鼠标的显示形式。
2.effectAllowed
这个属性用于指定运行的拖拽操作效果，可选的值有none，all，copy，move，link，copyLink，copyMove，linkMove。默认情况这个值是all，如果要设置这个属性的值就要在dragstart的事件处理程序里进行设置。
3.files
包含了在data transfer中