vue拖动排序，vue使用 HTML5 的draggable拖放 API实现内容拖并排序，并更新数组数据

vue拖动排序，vue使用 HTML5 的draggable拖放 API实现内容拖并排序，并更新数组数据

实现效果

HTML5 draggable拖拽API实现内容拖动排序

实现代码

1.模板部分

将你的循环部分修改为支持拖拽：

vue

<template><div v-for="(item, index) in imgs" :key="index":class="['text_pics_box_item']"draggable="true"@dragstart="dragStart($event, index)"@dragover.prevent@dragenter="dragEnter($event, index)"@drop="drop($event, index)"@dragend="dragEnd"@mouseover="hovervariableItem(index)" @mouseleave="unhovervariableItem"><div class="text_pics_box_item_img"><img  :src="item"></div></template>

2. 添加拖拽相关方法

在 methods 中添加以下方法：

methods: {// 拖拽开始dragStart(event, index) {event.dataTransfer.effectAllowed = 'move';event.dataTransfer.setData('text/plain', index);this.draggingIndex = index;// 添加拖拽样式event.target.style.opacity = '0.5';event.target.style.transform = 'scale(0.95)';},// 拖拽进入dragEnter(event, index) {event.preventDefault();if (this.draggingIndex !== index) {// 可以添加视觉反馈，比如高亮目标位置const targetElement = event.target.closest('.text_pics_box_item');if (targetElement) {targetElement.style.boxShadow = '0 0 0 2px #3855d5';}}},// 拖拽放置drop(event, index) {event.preventDefault();const draggedIndex = parseInt(event.dataTransfer.getData('text/plain'));if (draggedIndex !== index) {// 重新排列数组this.reorderImages(draggedIndex, index);}// 清除视觉反馈const targetElement = event.target.closest('.text_pics_box_item');if (targetElement) {targetElement.style.boxShadow = '';}},// 拖拽结束dragEnd(event) {// 恢复元素样式event.target.style.opacity = '';event.target.style.transform = '';// 清除所有元素的视觉反馈const items = document.querySelectorAll('.text_pics_box_item');items.forEach(item => {item.style.boxShadow = '';});this.draggingIndex = null;},// 重新排列图片数组reorderImages(fromIndex, toIndex) {const images = [...this.form.imgs];const [movedItem] = images.splice(fromIndex, 1);images.splice(toIndex, 0, movedItem);// 更新数组this.form.imgs = images;},
}

3. 在 data 中添加拖拽状态变量

data() {return {draggingIndex: null,  // 当前正在拖拽的元素索引}
}

4. 添加样式优化（可选）

在 <style> 部分添加一些拖拽相关的样式：

.text_pics_box_item {transition: all 0.2s ease;
}.text_pics_box_item.drag-over {border: 2px dashed #3855d5;background-color: rgba(56, 85, 213, 0.1);
}

功能说明：

draggable="true": 使元素可拖拽
@dragstart: 拖拽开始时记录被拖拽元素的索引
@dragover.prevent: 阻止默认行为，允许放置
@dragenter: 拖拽进入目标元素时的视觉反馈
@drop: 放置元素时重新排列数组
@dragend: 拖拽结束时清理样式