Vue.Draggable实现交换位置


Posted in Vue.js onApril 07, 2022

Vue.Draggable实现交换位置,供大家参考,具体内容如下

前言

最近的一个项目接触了到了Vue.Draggable这个组件。不过我们的需求和Vue.Draggable这个组件所支持的有些出入。这个拖拽组件属于插入的模式。一但拖拽的是相间的元素(中间隔着几个元素),那么拖拽元素就会占据被拖拽元素的位置,而后续元素位置逐级向下减一。

如下图:

c拖拽到a的位置,表现为c插入到a的前面。所以变为了cab。

Vue.Draggable实现交换位置

需求

实现交换而非插入及上图要变成(cba)

实现方式

想要阻止它插入是不可能,我们只能等它插入结束后对我们想要的元素进行操作。比如拿到头和尾部两个索引。交换他们在数组中的位置。需要注意的是,因为拖拽时已经改变数组里面元素的位置了,因此我们需要在拖拽前copy一个和原数组一样的数组。

实现步骤

1、 选择一个适合自己的方法,需要能够获得开始索引和结束索引
end,sort,update都可以

Vue.Draggable实现交换位置

2、深拷贝

copyList(){
   this.copyList=this.list.slice(0)
}

3、通过索引来操作copyList数组位置

const item=this.copyList[oldIndex]
this.copyList.splice(oldIndex, 1, this.copyList[newIndex]);
this.copyList.splice(newIndex, 1, item);

4、将copyList赋值给list,并在结尾处获得新的拷贝的copyList

this.list=this.copyList
this.copyList = this.list.slice(0);

全部代码

import draggable from "@/vuedraggable";
let id = 1;
export default {
  name: "simple",
  display: "Simple",
  order: 0,
  components: {
    draggable,
  },
  data() {
    return {
      enabled: true,
      list: [{ name: "a" }, { name: "b" }, { name: "c" }],
      dragging: false,
      index: 0,
      copyList: [],
    };
  },
  computed: {
    draggingInfo() {
      return this.dragging ? "under drag" : "";
    },
  },
  created() {
    this.copyList = this.list.slice(0);
  },
  methods: {
    add: function () {
      this.list.push({ name: "Juan " + id, id: id++ });
    },
    replace: function () {
      this.list = [{ name: "Edgard", id: id++ }];
    },
    end({ oldIndex, newIndex }) {
      const item = this.copyList[oldIndex];
      this.copyList.splice(oldIndex, 1, this.copyList[newIndex]);
      this.copyList.splice(newIndex, 1, item);
      this.list = this.copyList;
      this.copyList = this.list.slice(0);
    },
  }
};
<draggable
        :list="list"
        :disabled="!enabled"
        class="list-group"
        ghost-class="ghost"
        :move="checkMove"
        @end="end"
        @sort="sort"
        @update="update"
        @start="start"
      >
  <div class="list-group-item" v-for="element in list" :key="element.name">{{ element.name }}</div>
</draggable>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue实现点击当前行变色
Dec 14 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
Vue实现简单计算器
Jan 20 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue实现简易音乐播放器
Aug 14 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
vue cli4中mockjs在dev环境和build环境的配置详情
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
vue3使用vuedraggable实现拖拽功能
vue整合百度地图显示指定地点信息
vue中使用mockjs配置和使用方式
VUE使用draggable实现组件拖拽
Apr 06 #Vue.js
You might like
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
给ECShop添加最新评论
2015/01/07 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
php对象工厂类完整示例
2018/08/09 PHP
Laravel 在views中加载公共页面的实现代码
2019/10/22 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
php 中序列化和json使用介绍
2013/07/08 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python3+Appium安装使用教程
2019/07/05 Python
python学习笔记之多进程
2020/08/06 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
国外的一些J2EE面试题一
2012/10/13 面试题
项目计划书范文
2014/01/09 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
我爱我校演讲稿
2014/05/21 职场文书
励志演讲稿800字
2014/08/21 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
董事会决议范本
2015/07/01 职场文书
换届选举主持词
2015/07/03 职场文书
我收到了德劲DE1107
2022/04/05 无线电
Python各协议下socket黏包问题原理
2022/04/12 Python