H5的drag使用说明和vue2.0拖拽排序示例

html5 drag api详解 

（引用原文https://www.cnblogs.com/wuya16/p/DragApi.html）

     回想下，以前我们是怎么实现拖拽的，主要有以下几步：

     1.目标元素绑定mousedown事件，记录下此时鼠标位置和拖拽元素的位置差，分别是 diffX ,diffY

     2.在mousedown中绑定 document的mousemove 以及mouseup

     3.在mousemove中计算拖拽元素的位置： x = event.clientX - diffX ,y = event.clientY - diffY

     4.mouseup时中销毁绑定的 document mousemove 和mouseup事件，销毁拖拽元素

    当一个元素拖拽的时候，鼠标顺序依次：mousedown,mousemove,mouseup,click , 如果一个元素既可以点击，又需要拖拽，悲剧就发生了。可能导致，我们拖着拖着发生了点击事件，页面跳转了。这时候，我们通常会采用延时操作，避免误操作。总之，处理起来是挺麻烦的。

     现在好了，有了html5 drag，浏览器自动帮我们处理好了。

     要让一个元素支持拖拽，首先我们需要在标签上标示出来：

<div draggable="true"></div>

对于Safari，还必须要在CSS中对能拖拽的元素如下设置：

*[draggable = true] {
    -khtml-user-drag: element;}     

元素在拖放过程中触发的事件

先列下拖拽过程中可能触发的事件，如下：

1. dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
2. darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
3. dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
4. dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
5. dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
6. drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
7. dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

其中事件主体是拖放元素的是，dragstart（开始拖动） 、darg（正在拖放） 、dragend（拖放结束），其他4个事件主体都是目标元素，进入、移动、离开、完全进入四个状态。

注意：为了减少事件，你可以在事件 ondragenter 的时候 绑定方法 ，而 ondragleave 的时候，删除 方法。最好不要绑定在 dragover 上，它就像 mouseover ，在拖动的过程中不断触发，对于浏览器的负担就很大了，浏览器还有可能崩溃。

$('.test').on('