Vue中拖动排序功能,引入SortableJs,前端拖动排序。

这篇具有很好参考价值的文章主要介绍了Vue中拖动排序功能,引入SortableJs,前端拖动排序。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景:

作为一名前端开发人员,在工作中难免会遇到拖拽功能,分享一个github上一个不错的拖拽js库,能满足我们在项目开发中的需要,支持Vue和React,下面是我在vue后台项目中中使用SortableJS的使用详细流程;

安装:

npm install sortablejs

需要使用的页面引入

import Sortable from "sortablejs";

js代码

在页面生命周期mounted()的时候,调用初始化拖拽实例方法:

 mounted() {
    this.test();//方法名可自定义
  },

页面methods中:  

 // 拖拽
    test() {
      var that = this;
      var el = document.getElementById("items");
      // 常用
      new Sortable(el, {
        draggable: ".listitem",
        animation: 500,
        onEnd: function (evt) {
          setTimeout(() => {
            console.log('evt');
            console.log(evt);
            // 处理出排序之后的data数据
            that.arr.splice(
              evt.newIndex,
              0,
              that.arr.splice(evt.oldIndex, 1)[0]
            ); //在数据中,将元素从旧位置删除,再新增到新位置
             console.log(arr)
          
        }
      });
    },

里面的配置:draggable: ".listitem"  将这个改成你需要拖动的实际元素的class,注意不与别的地方的元素重复. 

以上代码在拖拽完成后会得到一个evt对象.里面包含了一些信息:

Vue中拖动排序功能,引入SortableJs,前端拖动排序。,前端,vue.js,javascript

里面有你拖动的这个元素拖动前的索引oldIndex和拖动后的索引newIndex,于是我利用这两个索引将数组数组进行处理,处理得到拖动后顺序相同的数据,在后续进行调用接口保存顺序。

 that.arr.splice(
       evt.newIndex, 0,that.arr.splice(evt.oldIndex, 1)[0]
     )

以上代码的逻辑:

先将被拖动的项从原数组中删除,而splice方法会返回一个数组,这个数组只有一项,就是被删除项,于是,再将被删除项添加到他新位置上就好了.文章来源地址https://www.toymoban.com/news/detail-663149.html

到了这里,关于Vue中拖动排序功能,引入SortableJs,前端拖动排序。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3如何实现使用SortableJs插件进行表格内的数据项拖拽排序

    npm i sortablejs --save 或者 yarn add sortablejs   我使用的组件库是ant design vue, 我主要使用的是Sortablejs 中的结束拖拽之后的onEnd 属性,因为是单表格的简单拖拽排序所以只用到了自带的参数对象evt的oldIndex和newIndex这两个属性,分别表示被拖拽的数据项拖拽前的下标和拖拽完成之后

    2024年02月11日
    浏览(53)
  • 前端vue3+element plus 分页table排序功能实现

    我有如下所示的一个table,数据data是一个computed计算属性,一般情况下筛选使用element的sortable属性就可以了,可查看Element - The world\\\'s most popular Vue UI framework 但我的 table 是一个分页的 table ,当我使用 sortable 时发现,它只是对当前页的数据进行排序,但这并不是我需要的,我的

    2024年02月14日
    浏览(52)
  • vue3引入JS-SDK实现h5分享小卡片、跳转微信小程序功能

    微信js-sdk官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 想要实现的效果: 1.登录微信公众平台,进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2.通过npm引入js-sdk 安装成功后,可以在package.json中找到\\\"weixin-js-sdk\\\" 3.在main.js中,将js-sdk挂载

    2024年02月11日
    浏览(68)
  • vue+face-api.js实现前端人脸识别功能

    近期做了一个前端vue实现人脸识别的功能,主要功能逻辑包含:人脸识别,人脸验证,唤起摄像头视频流之后从三个事件(用户点头、摇头、眨眼睛)中随机选中两个事件,待两个事件通过判断后人脸静止不动3秒钟后截取视频流生成图片,上传到阿里或者腾讯oss,通过oss返回

    2024年02月05日
    浏览(45)
  • vue element-table(树形结构),实现同级拖动排序

    ####需求:树形结构的table需要实现同级拖拽排序 1.vue引用sortablejs 参考相关配置http://www.sortablejs.com/options.html 2.定义变量 3.初始化created中调用方法,方法如下 4.扁平化数据方法 5.犹豫这个过程中需要子级存在父级的parentId,自己把扁平化的方法改造了一下,在查询完列表数据时

    2024年02月14日
    浏览(41)
  • vue 封装一个鼠标拖动选择时间段功能

       

    2024年02月15日
    浏览(39)
  • 前端Vue3+TS实现视频放大缩小,放大后实现视频的拖动+拖动边框限制

    最近实现了一个新的需求,大体内容是要对所播放的视频做一个放大缩小的处理,同时在视频放大的同时要实现视频的一个拖拽,拖拽的同时,要对视频拖动的范围作出一个限制,下面来看看我的一个实现的思路。 技术栈:Vue3.2 + TS 1.放大缩小采用的形式是什么? 2.拖动实现

    2024年01月25日
    浏览(43)
  • 【vue】vue.js中引入组件

    注意组件中的name命名方式 希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~ ❤️原创不易,期待你的关注与支持~ 点赞👍+收藏⭐️+评论✍️ 😊之后我会继续更新前端学习小知识,关注我不迷路~

    2024年02月12日
    浏览(44)
  • uniapp引入全局js,vue2/vue3不同方式引入

    Hi I’m Shendi uniapp引入全局js,vue2/vue3不同方式引入 最近写小程序,个人开发,选用了 uni-app 进行开发 选用的 vue3 版本 因为我用的 vue3 版本,在这里踩了没学过vue3的坑,用vue2引入全局js的方式使用,导致undefined… Vue2 版引入全局js的方法如下 将js放到项目内,一般放到自建的

    2024年02月03日
    浏览(64)
  • Vue+element table+原生js +touch触摸事件实现移动端横向拖动

    Vue+element table+原生js +touch触摸事件实现移动端横向拖动 今天做移动端项目时,想加个表格展示数据,但是调试的时候发现,表格数据很多时,想要触屏左右滑动内容,但是滑动不了,又不想引用插件实现,只好自己写个拖拽事件了

    2024年02月17日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包