如果想拖拽排序的可以用组件：vuedraggable。

组件安装

npm i vuedraggable -S

引入

import draggable from 'vuedraggable'

配置项

group: string or array 分组用的，同一组的不同list可以相互拖动sort: boolean 定义是否可以拖拽delay:number 定义鼠标选中列表单元可以开始拖动的延迟时间touchStartThreshold:number (不清楚)disabled: boolean 定义是否此sortable对象是否可用，为true时sortable对象不能拖放排序等功能store:animation: umber 单位:ms 动画时间handle: selector 格式为简单css选择器的字符串，使列表单元中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使列表单元进行拖动filter: selector 格式为简单css选择器的字符串，定义哪些列表单元不能进行拖放，可设置为多个选择器，中间用“，”分隔preventOnFilter: 当拖动filter时是否触发event.preventDefault()默认触发draggable: selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放ghostClass: selector 格式为简单css选择器的字符串，当拖动列表单元时会生成一个副本作为影子单元来模拟被拖动单元排序的情况，此配置项就是来给这个影子单元添加一个class，我们可以通过这种方式来给影子元素进行编辑样式chosenClass: selector 格式为简单css选择器的字符串，目标被选中时添加dragClass:selector 格式为简单css选择器的字符串，目标拖动过程中添加forceFallback: boolean 如果设置为true时，将不使用原生的html5的拖放，可以修改一些拖放中元素的样式等fallbackClass： string 当forceFallback设置为true时，拖放过程中鼠标附着单元的样式dataIdAttr： data-idscroll：boolean当排序的容器是个可滚动的区域，拖放可以引起区域滚动scrollFn：function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … } 用于自定义滚动条的适配scrollSensitivity: number 就是鼠标靠近边缘多远开始滚动默认30scrollSpeed: number 滚动速度

函数配置

setData: 设置值时的回调函数onChoose: 选择单元时的回调函数onStart: 开始拖动时的回调函数onEnd: 拖动结束时的回调函数onAdd: 添加单元时的回调函数onUpdate: 排序发生变化时的回调函数onRemove: 单元被移动到另一个列表时的回调函数onFilter: 尝试选择一个被filter过滤的单元的回调函数onMove: 移动单元时的回调函数onClone: clone时的回调函数以上函数对象的属性：to: 移动到的列表的容器from：来源列表容器item: 被移动的单元clone: 副本的单元oldIndex：移动前的序号newIndex：移动后的序号

就不写了去看官网或者百度

以下不用组件方法。

方法1： 没用过，感觉不错，直接上连接

https://www.cnblogs.com/carriezhao/p/11457841.html

拖拽事件和属性

标记 这个很重要!!! 这个决定了拖拽事件的行为。当点击开始拖拽之后，鼠标点击所在的位置就是标记。

dragstart： 当单击下鼠标，并移动之后执行。

drag：在dragstart执行之后，鼠标在移动时连续触发。

dragend：当拖拽行为结束，也就是松开鼠标的时候触发。

dragenter：当正在拖拽的元素的标记进入某个Dom元素时触发，自身首先会触发。被进入的Dom元素会触发这个事件。

dragover：当拖拽的元素的标记在进入的Dom元素上移动时触发，在自身移动时也会触发。

dragleave：当拖拽的元素在离开进入的Dom时触发。

H5拖拽属性

draggable：当需要某个元素可以拖拽时，需设置为true，默认为false。选中的文本、图片、链接默认可以拖拽。

DataTransfer对象：该属性用于保存拖放的数据和交互信息，该组件没有使用到，暂忽略。

常规

只需要监听三个事件dragstart、dragenter、dragend。需要知道开始拖拽时的元素是谁，拖拽后去往的元素是哪个，以及最后拖拽的结束。

方法2：

大概需求

1:设置draggable="true"允许其被拖动

<li draggable="true" @dragstart="drag($event)">拖拽内容</li>
<li @drop="drop($event,'item')" @dragover="allowDrop($event)">我是放下的位置</li>

2:method里，看注释

```

// 拖拽 drag(ev, id) { console.log("拖动", id); this.id = id; this.dom = ev.currentTarget.cloneNode(true); console.log(this.dom); }, // 允许放下拖拽 allowDrop(ev) { ev.preventDefault(); }, // 放下事件 drop(ev, item) { console.log("放下", item); console.log(ev); ev.preventDefault(); let treeNode = ev.target; if (treeNod