最近为公司编写基于react的树组件，用到了HTML5的新特性，drag和drop。一时兴起，总觉得应该将自己的使用心得记录下来。
html
<div id="droptarget"></div>
/* 如果不设置draggable属性，元素将无法被拖拽 */
<div id="dragtarget" draggable>拖动我</div>
ondragstart
当开始拖拽目标时，该事件立即触发，此时，可以在事件中设置拖拽的数据类型和数据。
这个事件绑定在你想要拖动的元素上。
document.addEventListener('dragtarget',function(event){
event.stopPropagation();
event.preventDefault();
//设置拖拽的数据类型和数据
event.dataTransfer.setData('text', event.target.id)
});
ondragover
当拖动的元素拖动到目标容器内，未释放鼠标时，触发该事件，这个事件绑定在你想要拖动到的目标容器上。
document.addEventListener('droptarget', function(event){
event.stopPropagation();
event.preventDefault(); //这句代码必须设置，否则拖拽会被禁止
});
ondargenter
当元素进入目标容器时，触发该事件，这个事件也和上面的一样，绑定在目标容器上。
document.addEventListener('dragenter', function(event){
event.stopPropagation();
event.preventDefault();
//可以做一些改变样式的操作
});
ondragleave
当元素离开目标容器时，触发该事件，这个事件同样绑定在目标容器上。
document.addEventListener('dragleave', function(event){
event.stopPropagation();
event.preventDefault();
//可以做一些改变样式的操作
});
ondrop
当拖动元素进入目标容器后，释放鼠标时，触发该事件，该事件绑定在目标容器上。
document.addEventListener('drop', function(event){
event.stopPropagation();
event.preventDefault();
//获取dataTransfer的值，并且只能在drop事件中获取
event.dataTransfer.getData('text')
});
event.dataTransfer.effectAllowed
该属性含有六个值，具体效果可以自己去菜鸟教程里面进行试验，该属性的值在dragstart中设置
event.dataTransfer.dropEffect
该属性值与上面的event.dataTransfer.effectAllowed连用，如，将effectAllowed设置为move，那么该属性的值只能设置为move，否则拖拽将会被禁止。
