<table>
	<thead>
		<tr>
			<th>標(biāo)題1</th>
			<th>標(biāo)題2</th>
			<th>標(biāo)題3</th>
		</tr>
	</thead>
	<tbody>
		<tr v-for="(items,index) in dataList" :key="index"
			draggable="true"
            @dragstart="handleDragStart($event, items)"
            @dragover.prevent="handleDragOver($event, items)"
            @dragenter="handleDragEnter($event, items)"
            @dragend="handleDragEnd($event, items)"
        >
			<td>{{items.content}}</td>
		</tr>
	</tbody>
</table>
<script>
	var VM = new Vue({
		el:'#app',
		data:function(){
			return {
				dataList:[{
					content:'內(nèi)容'
				},{
					content:'內(nèi)容'
				},{
					content:'內(nèi)容'
				}],
				dragging: null
			}
		},
		methods:{
			handleDragStart(e,items){
                this.dragging = items;//開始拖動(dòng)時(shí)，暫時(shí)保存當(dāng)前拖動(dòng)的數(shù)據(jù)。
            },
            handleDragEnd(e,items){
                this.dragging = null;//拖動(dòng)結(jié)束后，清除數(shù)據(jù)
            },
            handleDragOver(e) {
                e.dataTransfer.dropEffect = 'move';//在dragenter中針對(duì)放置目標(biāo)來設(shè)置!
            },
            handleDragEnter(e,items){
                e.dataTransfer.effectAllowed = "move";//為需要移動(dòng)的元素設(shè)置dragstart事件
                if(items == this.dragging) return;
                var newItems = [...this.dataList];//拷貝一份數(shù)據(jù)進(jìn)行交換操作。
                var src = newItems.indexOf(this.dragging);//獲取數(shù)組下標(biāo)
                var dst = newItems.indexOf(items);
                newItems.splice(dst, 0, ...newItems.splice(src, 1));//交換位置
                this.dataList = newItems;
            }
		}
	})
</script>