Javascript实现拖拽排序的代码
更新时间:2022年09月22日 16:31:11 作者:zhaojiancheng
这篇文章主要介绍了Javascript实现拖拽排序的代码,本文在vue运行环境下给大家演示下效果图,对js拖拽排序实例代码感兴趣的朋友跟随小编一起看看吧
运行环境: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拖拽排序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript中实现PHP的打乱数组函数shuffle实例
这篇文章主要介绍了JavaScript中实现PHP的打乱数组函数shuffle实例,本文用2种方法实现了类似PHP的打乱数组函数shuffle函数,需要的朋友可以参考下2014-10-10bootstrap时间控件daterangepicker使用方法及各种小bug修复
这篇文章主要介绍了bootstrap时间控件daterangepicker使用方法,及各种小bug修复,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-10-10
最新评论