如何用JavaScript编写支持长尾词的拖拽排序功能？

本文共计303个文字，预计阅读时间需要2分钟。

运行环境：Vue 3.2及以上，复制粘贴即可运行。

效果如下：templatediv class=container transition-group name=flip-listdiv v-for=item in items :key=item draggable=true class=items @dragstart=dragstart(item)

运行环境：vue3.2以上,复制张贴运行即可看效果
效果如下：

<template> <div class="container"> <transition-group name="flip-list"> <div v-for="item in items" :key="item" draggable="true" class="items" @dragstart="dragstart(item)" @dragenter="dragenter(item)" @dragend="dragend">{{item}}</div> </transition-group> </div> </template> <script setup> import { ref } from "vue"; const items = ref([1, 2, 3, 4, 5, 6, 7, 8, 9]) const oldNum = ref(0) const newNum = ref(0) // 记录初始信息 const dragenter = (param) => { newNum.value = param } // 做最终操作 const dragend = () => { if(oldNum.value !== newNum.value){ const oldIndex = items.value.indexOf(oldNum.value) const newIndex = items.value.indexOf(newNum.value) const newItems = [...items.value] // 删除老的节点 newItems.splice(oldIndex,1) // 在列表中目标位置增加新的节点 newItems.splice(newIndex,0,oldNum.value) // items改变transition-group就会起作用 items.value = [...newItems] } } // 记录移动过程中信息 const dragstart = (param) => { oldNum.value = param; } </script> <style scoped> .items { width: 300px; height: 50px; line-height: 50px; text-align: center; background: linear-gradient(45deg, #234, #567); color: pink; } .flip-list-move { transition: transform 1s; } </style>

到此这篇关于Javascript实现拖拽排序的文章就介绍到这了,更多相关js拖拽排序内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！