（ Hot）原生js实现拖拽交换位置

成品效果如下，demo地址

很简单，一个属性：draggable="true"，两个关键方法：dragend、dragenter

draggable：开启元素允许拖拽

dragend：监听元素结束拖拽，此时可以做一些交换数据的逻辑(还有dragstart有需要自己上)

dragenter：监听有元素拖拽进入到当前元素，此时更新要拖拽到的目标信息

2、代码

html:

<div draggable="true" @dragend="dragend(num,index)"  @dragenter="dragEnter(num,index)"
 class="cell" :class="{active:lastEnterIndex===index}" v-for="(num,index) in defaultArr" :key="index">
	{{num}}
</div>

js：

    export default{
		data(){
			return{
				defaultArr:['我','是','中','国','人','我','热','爱','祖','国'],
				lastEnterIndex: null,
			}
		},
		methods:{
			dragend(num, ind) { // 拖拽元素结束
				// console.log('end', num,ind);
				const lastInd=this.lastEnterIndex;
				if(lastInd){
					[this.defaultArr[ind],this.defaultArr[lastInd]]=[this.defaultArr[lastInd],this.defaultArr[ind]]; // es6进行数据交换
					this.lastEnterIndex=null;
					this.$forceUpdate(); // 强制更新
				}
			},
			dragEnter(num, ind){ // 拖拽的元素A进入某元素B
				// console.log('进入', num,ind);
				this.lastEnterIndex=ind;
			}
		}
	}