vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼

更新時間：2023年09月07日 15:44:46 作者：宋承佑

在使用Vue的場景下,需要實現(xiàn)對元素進行拖動交換位置,接下來通過本文給大家介紹vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼,需要的朋友可以參考下

項目場景：

在使用Vue的場景下，需要實現(xiàn)對元素進行拖動交換位置。

在這里插入圖片描述

需求分析：

1、兩兩交換的其實是數(shù)組的下標。數(shù)據(jù)內(nèi)容不變。

2、拖拽功能需要用到一下API。

方法名	詳解
`ondraggable`	設(shè)置元素是否允許被拖動。鏈接和圖片默認是可拖動，因此不用設(shè)置該屬性
`ondragstart`	用戶開始拖動元素或選擇的文本時觸發(fā)。
`ondragover`	拖動元素或選取的文本正在拖動到放置目標時觸發(fā)。默認情況下，數(shù)據(jù)/元素不能放置到其他元素中。如果要實現(xiàn)改功能，我們需要防止元素的默認處理方法。我們可以通過調(diào)用 `event.preventDefault()` 方法來實現(xiàn) ondragover 事件。
`ondragenter`	當被鼠標拖動的對象進入其容器范圍內(nèi)時觸發(fā)此事件
`ondragend`	用戶完成元素拖動后觸發(fā)

關(guān)于更多的API介紹可以看點這里

代碼實現(xiàn)：

<table>
	<thead>
		<tr>
			<th>標題1</th>
			<th>標題2</th>
			<th>標題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;//開始拖動時，暫時保存當前拖動的數(shù)據(jù)。
            },
            handleDragEnd(e,items){
                this.dragging = null;//拖動結(jié)束后，清除數(shù)據(jù)
            },
            handleDragOver(e) {
                e.dataTransfer.dropEffect = 'move';//在dragenter中針對放置目標來設(shè)置!
            },
            handleDragEnter(e,items){
                e.dataTransfer.effectAllowed = "move";//為需要移動的元素設(shè)置dragstart事件
                if(items == this.dragging) return;
                var newItems = [...this.dataList];//拷貝一份數(shù)據(jù)進行交換操作。
                var src = newItems.indexOf(this.dragging);//獲取數(shù)組下標
                var dst = newItems.indexOf(items);
                newItems.splice(dst, 0, ...newItems.splice(src, 1));//交換位置
                this.dataList = newItems;
            }
		}
	})
</script>

關(guān)于Array.prototype.splice()

到此這篇關(guān)于vue實現(xiàn)元素拖動并互換位置的文章就介紹到這了,更多相關(guān)vue元素拖動互換位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: