HTML5拖拽drag和drop

最近为公司编写基于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，否则拖拽将会被禁止。