首页
编程最新

分类

当前位置: 云海天教程网 > 技术新闻 > 编程最新 >正文

Javascript实现拖拽排序的代码【java面试】

更新时间:2022-09-22  作者:佚名   来源: 网络转载

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

Javascript实现拖拽排序的代码【java面试】【Js框架】

<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拖拽排序内容请搜索云海天教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持云海天教程!

上一篇:Meta开源JavaScript内存泄漏监测工具MemLab安装使用【java基础】【Js面试】 下一篇:Activiti 7 源码学习
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

 陕公网安备 61050202000585号

陕ICP备14013131号-3