运行环境:vue3.2以上,复制张贴运行即可看效果效果如下: <template> <div class="container"> <tr
运行环境: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拖拽排序内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Javascript实现拖拽排序的代码
本文链接: https://www.lsjlt.com/news/168223.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0