当某个元素被拖动放在一个目标元素上时，放置目标则依次放生以下事件：

拖动元素经过各个元素时，这些元素虽然支持放置元素的事件，但是默认是不允许放置的，因此也就不会触发 drop 事件。需要在允许放置的元素中重写 dragenter 和 dragover 事件的默认行为，即使用 Event.preventDefault() 方法。

有些浏览器 drop 事件默认行为打开放到放置目标的URL。如拖放一个图片，就直接转到图片文件。因此也需要取消 drop 事件的默认行为。

format是字符串类型，表示数据类型的；data也是字符串类型，即要保存的值。

dataTransfer 对象的两个属性 dropEffect 和 effectAllowed ，分别设置被拖动元素的放置效果和指定当元素被拖放时允许的效果。
dataTransfer 对象还有个 files 属性包含拖动到浏览器窗口的文件列表。可以用这个借口实现文件拖动上传。

1

lists: ['1: apple', '2: banana', '3: orange', '4: melon']

在html使用v-for渲染，使用 transition-group 组件加入动画效果

1
2
3
4
5
6
7

<transition-group id='app' name="drog" tag="ul">
    <li draggable="true" v-for="(item, index) in lists" 
        @dragstart="dragStart($event, index)" @dragover="allowDrop" @drop="drop($event, index)" 
        v-bind:key="item">
        {{item}}
    </li>
</transition-group>

每个li需要给定一个唯一的key，这样才能很好的使用过渡效果

索引在 dragstart 事件中传入，可以使用 dataTransfer 保存

1
2
3
4

//开始拖动
dragStart(e, index){
    e.dataTransfer.setData('Text', index);
}

放置元素触发 drop 事件，在 drop 事件中，我们同时拥有放置目标元素的索引 index ，以及被拖动元素的索引 dragIndex 。比较简单的做法是使用一个新数组记录整个过程，最后把新数组赋给原数据变量。使用splice删除和插入，效果就是从前面拖到后面是插入放置元素后面，而从后面往前拖放是插入到放置元素前面。这样不需要再判断方向，也能得到比较好的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//放置
drop(e, index){
    //取消默认行为
    this.allowDrop(e);
    //使用一个新数组重新排序后赋给原变量
    let arr = this.lists.concat([]),
        dragIndex = e.dataTransfer.getData('Text');
        temp = arr.splice(dragIndex, 1);
    
    arr.splice(index, 0, temp[0]);
    this.lists = arr;
}