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新手入门指导教程
Nov 18 Vue.js
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
全面解析Vue中的$nextTick
Dec 24 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
教你部署vue项目到docker
Apr 05 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
Vue Element plus使用方法梳理
Dec 24 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简单系统查询模块代码打包下载
2008/06/07 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
关于PHP虚拟主机概念及如何选择稳定的PHP虚拟主机
2018/11/20 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
jQuery语法高亮插件支持各种程序源代码语法着色加亮
2013/04/27 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
javascript创建含数字字母的随机字符串方法总结
2016/08/01 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
python hough变换检测直线的实现方法
2019/07/12 Python
使用Python实现画一个中国地图
2019/11/23 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
类的核心特性有哪些
2014/01/01 面试题
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
财务情况说明书范文
2014/05/06 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
英语教师个人工作总结
2015/02/09 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书