最近公司一个项目在做前端可配置界面，各种拖拽，所以在项目之前，花了半天时间熟悉了H5的拖拽事件，网上很多说不清楚，所以我想作为巩固自己的学习过程，并且可以帮助很多初次接触拖拽的同学了解拖拽的演变过程，所以对拖拽事件做了简单的总结：
一、拖拽的演变
在html5之前，拖拽事件主要由鼠标的mousedown、mouseup和mouseover实现，主要过程为js代码实现：
1、鼠标按下
2、鼠标按住移动
3、鼠标松开
html5可谓大杀器，提供了以上这些需要js写很多代码才能实现的功能。
二、html5的事件总结
1、首先，先要设置要拖拽的元素允许拖拽（注：链接和图像标签默认是可拖动的，不需要设定，其他元素都需要设定），即在元素内部设置draggable=“true”；
2、其次，就是被拖拽的元素的三个事件：
（1）ondragstart事件：点击被拖拽元素开始移动的时候触发的事件
（2）ondrag事件：被拖拽元素移动过程触发的事件，一般情况下不触发
（3）ondragend事件：被拖拽结束触发的事件。
3、最后，就是拖拽目标元素的三个事件：
（1）ondragenter事件：当被拖拽元素进入拖拽目标元素触发的事件。
（2）ondragover事件：当被拖拽元素在拖拽目标元素内部移动触发的事件。
（3）ondrop事件：当被拖拽元素在目标元素上并松开鼠标触发的事件。
4、Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。
5、Event.effectAllowed 属性：就是拖拽的效果。
6、Event.originalEvent.DataTransfer 对象：我看了网上那么多博客，没有一个写对的，这个DataTransfer对象是在event对象的属性originalEvent中退拽对象用来传递的媒介，使用一般为Event.originalEvent.dataTransfer。
三、注意事项：
1、dataTransfer对象中的数据只能在drop事件程序中读取，其他事件中无法读取。
2、IE只定义了”text”或”URL”两种有效的数据类型，而HTML5则对此加以扩展，允许指定各种MIME类型（即可以读取json格式）。考虑到向后兼容，HTML5也支持”text”或”URL”，但这两种类型会被映射为”text/plain”或”text/url-list”。
3、在目标元素的设定中，一定要定义好目标元素所在的容器，防止无法放置被拖拽元素，显示为一个禁止的标志。
-----------------------------------------------------------------------------------------------------------------------
2017.11.28更新
附上我最近写的一个拖拽事件：
/** 指标拖拽 **/
$('.drag-item').each(function () {
$(this).on('dragstart', function (ev) {
$('.drag-target').css('background-color', '#eef7ff');
var dt = ev.originalEvent.dataTransfer;
dt.setData('Text', this.attr('data-name') + ',' + this.attr('data-id'));
}).on('dragend', function () {
$('.drag-target').css('background-color', 'transparent');
});
});
$('body').on('dragover','.drag-target', function (ev) {
ev.preventDefault();
}).on('drop','.drag-target', function (ev) {
ev.preventDefault();
var data = ev.originalEvent.dataTransfer.getData("Text");
var dataList = data.split(',');
$(this).find('ul.axis-tag-list').append('<li><span class="axis-tag-name"' + 'data-id="' + dataList[0] + '">' + dataList[1] + '</span><a href=""><i class="fa fa-times-circle mr-5"></i></a ></li>');
});说明：drag-item是拖拽元素的class，drag-target是拖拽的目标元素的class。