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中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
ant design vue的form表单取值方法
Jun 01 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过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
php实现的简单检验登陆类
2015/06/18 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
PHP 中使用ajax时一些常见错误总结整理
2017/02/27 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
详解python3中tkinter知识点
2018/06/21 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
基于django ManyToMany 使用的注意事项详解
2019/08/09 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
基于Python解密仿射密码
2019/10/21 Python
python如何调用字典的key
2020/05/25 Python
学习python需要有编程基础吗
2020/06/02 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
学雷锋倡议书
2015/01/19 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
《分数乘法》教学反思
2016/02/24 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
Windows11 Insider Preview Build 25206今日发布 更新内容汇总
2022/09/23 数码科技