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 router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
javascript运动详解
2015/07/06 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
javascript轮播图算法
2016/10/21 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
互联网电子商务专业毕业生求职信
2014/03/18 职场文书
预备党员承诺书
2014/03/25 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
小学总务工作总结
2015/08/13 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python