企业官网建设流程全解析

广州市住房和建设水务局网站,赣州做网站的公司哪家好,旅游公司注册条件,杭州 网站设计制作类似这样的我现在要实现能够拖拽 直接能够让这个列表项 切换顺序我们可以使用前端库 也可以使用原生自带的功能我直接贴代码了templateel-form-item label选择书籍#xff1a; classbook-select-containerdiv classbooklist-contai…类似这样的我现在要实现能够拖拽 直接能够让这个列表项 切换顺序我们可以使用前端库 也可以使用原生自带的功能我直接贴代码了templateel-form-item label选择书籍 classbook-select-container div classbooklist-container refbookList div classbook-item v-for(item, index) in selectBookList :keyitem.id :draggabletrue dragstartonBookDragStart($event, index) dragover.preventonBookDragOver($event, index) droponBookDrop($event, index) dragenteronBookDragEnter($event, index) dragleaveonBookDragLeave($event, index) div classindex div classnnumber{{ index 1 }}/div /div div classnovelName{{ item.novelName }}/div /div /div /el-form-itemscript// 书籍拖拽相关函数 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