vue实现拖拽交换位置


Posted in Vue.js onApril 07, 2022

本文实例为大家分享了vue实现拖拽交换位置的具体代码,供大家参考,具体内容如下

<template>
  <div class="root">
    <transition-group tag="div" class="container">
      <div
        class="item"
        :class="'item' + i"
        v-for="(item, i) in items"
        :key="item.key"
        :style="{ 'background-color': item.color, border: '1px solid' }"
        draggable="true"
        @dragstart="handleDragStart($event, item)"
        @dragover.prevent="handleDragOver($event, item)"
        @dragenter="handleDragEnter($event, item)"
        @dragend="handleDragEnd($event, item)"
      >
        <div>{{ item }}</div>
      </div>
    </transition-group>
  </div>
</template>
 
<script>
export default {
  name: "Toolbar",
  data() {
    return {
      items: [
        { key: 1, color: "#3883a0" },
        { key: 2, color: "#4883a0" },
        { key: 3, color: "#5883a0" },
        { key: 4, color: "#6883a0" },
        { key: 5, color: "#7883a0" },
        { key: 6, color: "#8883a0" },
        { key: 7, color: "#9883a0" },
      ],
      ending: null,
      dragging: null,
    };
  },
  methods: {
    handleDragStart(e, item) {
      this.dragging = item;
    },
    handleDragEnd(e, item) {
      if (this.ending.key === this.dragging.key) {
        return;
      }
      let newItems = [...this.items];
      const src = newItems.indexOf(this.dragging);
      const dst = newItems.indexOf(this.ending);
      newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
      console.log(newItems);
 
      this.items = newItems;
      this.$nextTick(() => {
        this.dragging = null;
        this.ending = null;
      });
    },
    handleDragOver(e) {
      // 首先把div变成可以放置的元素,即重写dragenter/dragover
      // 在dragenter中针对放置目标来设置
      e.dataTransfer.dropEffect = "move";
    },
    handleDragEnter(e, item) {
      // 为需要移动的元素设置dragstart事件
      e.dataTransfer.effectAllowed = "move";
      this.ending = item;
    },
  },
};
</script>
 
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 200px;
  height: 200px;
  margin: 10px;
  color: #fff;
  transition: all linear 0.3s;
}
.item0 {
  width: 400px;
}
</style>

效果

vue实现拖拽交换位置

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

Vue.js 相关文章推荐
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue项目支付功能代码详解
Feb 18 Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 Vue.js
Vue.Draggable实现交换位置
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
vue cli4中mockjs在dev环境和build环境的配置详情
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 #Vue.js
vue3使用vuedraggable实现拖拽功能
vue整合百度地图显示指定地点信息
vue中使用mockjs配置和使用方式
You might like
获取远程文件大小的php函数
2010/01/11 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
浅谈php扩展imagick
2014/06/02 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
js location.replace与location.reload的区别
2010/09/08 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
2018/07/24 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python开头的coding设置方法
2019/08/08 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
日本无添加化妆品:HABA
2016/08/18 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
小班下学期个人总结
2015/02/12 职场文书
员工给公司的建议书
2019/06/24 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android