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

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

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

实现效果
实现代码
- 1.模板部分
- [2. 添加拖拽相关方法](#2. 添加拖拽相关方法)
- [3. 在 data 中添加拖拽状态变量](#3. 在 data 中添加拖拽状态变量)
- [4. 添加样式优化（可选）](#4. 添加样式优化（可选）)
功能说明：

实现效果

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

实现代码

1.模板部分

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

vue

bash 复制代码

<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 中添加以下方法：

bash 复制代码

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 中添加拖拽状态变量

bash 复制代码

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

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

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

bash 复制代码

.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: 拖拽结束时清理样式