vue实现拖拽排序

        在业务中列表拖拽排序是比较常见的需求，常见的JS拖拽库有Sortable.js，Vue.Draggable等，大多数同学遇到这种需求也是更多的求助于这些JS库，其实，使用HTML原生的拖放事件来实现拖拽排序并不复杂，结合Vue的transition-group,还能快速的给排序添加过渡动画。

HTML5拖放api

1. 设置元素为可拖放

为了使元素可拖动，把 draggable 属性设置为 true ：

<div draggable="true">能被拖放的元素</div>

2. 拖放事件

拖放涉及到两种元素，一种是被拖拽元素（源对象），一种是放置区元素（目标对象）。如下图所示，按住A元素往B元素拖拽，A元素即为源对象，B元素即为目标对象。

触发对象	事件名称	说明
在拖动目标上触发事件	ondragstart	用户开始拖动元素时触发
	ondrag	元素正在拖动时触发
	ondragend	用户完成元素拖动后触发
释放目标时触发的事件	ondragenter	当被鼠标拖动的对象进入其容器范围内时触发此事件
	ondragover	当某被拖动的