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

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

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

我直接贴代码了

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