前端vue3 web端中实现拖拽功能实现列表排序

一只小阿乐2025-12-17 17:10

类似这样的我现在要实现能够拖拽直接能够让这个列表项切换顺序

我们可以使用前端库也可以使用原生自带的功能

我直接贴代码了

template

复制代码

<el-form-item label="选择书籍：" class="book-select-container">
  <div class="booklist-container" ref="bookList">
    <div 
      class="book-item" 
      v-for="(item, index) in selectBookList" 
      :key="item.id"
      :draggable="true"
      @dragstart="onBookDragStart($event, index)"
      @dragover.prevent="onBookDragOver($event, index)"
      @drop="onBookDrop($event, index)"
      @dragenter="onBookDragEnter($event, index)"
      @dragleave="onBookDragLeave($event, index)"
    >
      <div class="index">
        <div class="nnumber">{{ index + 1 }}</div>
      </div>
      <div class="novelName">{{ item.novelName }}</div>
    </div>
  </div>
</el-form-item>

script

复制代码

// 书籍拖拽相关函数
const onBookDragStart = (event, index) => {
  event.dataTransfer.setData('text/plain', index.toString())
  event.target.classList.add('dragging')
}

const onBookDragOver = (event, index) => {
  event.preventDefault()
  event.currentTarget.classList.add('drag-over')
}

const onBookDragEnter = (event, index) => {
  event.preventDefault()
}

const onBookDragLeave = (event, index) => {
  event.currentTarget.classList.remove('drag-over')
}

const onBookDrop = (event, index) => {
  event.preventDefault()
  event.currentTarget.classList.remove('drag-over')
  
  const dragIndex = parseInt(event.dataTransfer.getData('text/plain'))
  const dropIndex = index
  
  if (dragIndex !== dropIndex) {
    const itemToMove = selectBookList.value[dragIndex]
    selectBookList.value.splice(dragIndex, 1)
    selectBookList.value.splice(dropIndex, 0, itemToMove)
    
    // 触发响应式更新
    selectBookList.value = [...selectBookList.value]
    ElMessage.success('书籍顺序已调整')
  }
  
  // 移除拖拽类
  document.querySelectorAll('.book-item').forEach(el => {
    el.classList.remove('dragging')
  })
}

这个是最简单的一个模板了

至于说样式的开发就看怎么写了原声的拖拽就是这样写的

不使用任何第三方库，纯原生HTML5拖拽API