SOURCE

var app = new Vue({
  el: '#app',
    data() {
      return {
        listData: []
      }
    },
    mounted () {
        for(let i =0 ; i < 10; i++) {
            this.listData.push(`第${i}行`)
        }
    },
    methods: {
        handleDragstart(event) {
            console.log(event)
            event.dataTransfer.setData("Text", event.target.id);
            event.target.style.opacity = "0.4";
            // console.log(event)
        },
        handleDragenter(evnet) {
            // console.log(event)
            event.target.style.border = "3px dotted red";
        },
        handleDragend(event) {
            event.target.style.opacity = "1";
        },
        handleDragleave(event) {
            event.target.style.border = "1px solid #cc0033";
        },
        handleDragover(event) {
            event.dataTransfer.dropEffect = 'move'
            event.preventDefault()
        },
        handleDrop(event) {
            event.preventDefault();
            event.target.style.border = "1px solid #cc0033";
            const data = event.dataTransfer.getData("Text");
            console.log(data)
            this.insertAfter(document.getElementById(data), event.target)
        },
        insertAfter(newElement, targetElement){
            const parent = targetElement.parentNode;
            if (parent.lastChild == targetElement) {
                // 如果最后的节点是目标元素，则直接添加。因为默认是最后
                parent.appendChild(newElement);
            } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
                //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
            }
        }
    }
});

<div id="app">
  <ul>
      <li
        v-for="item in listData"
        :key="item"
        draggable="true"
        @dragstart.stop="handleDragstart"
        @dragenter.stop="handleDragenter"
        @dragend.stop="handleDragend"
        @dragleave.stop="handleDragleave"
        @dragover.stop="handleDragover"
        @drop.stop="handleDrop"
        :id="item"
      >
        {{ item }}
    </li>
  </ul>
</div>

li {
    line-height: 30px;
    border: 1px solid #cc0033;
    margin-top: -1px;
}