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的hash值原理也是table切换实例代码
Dec 14 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
Vue3中的Refs和Ref详情
Nov 11 Vue.js
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
php格式化电话号码的方法
2015/04/24 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
python动态监控日志内容的示例
2014/02/16 Python
Python格式化css文件的方法
2015/03/10 Python
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
解决Keras的自定义lambda层去reshape张量时model保存出错问题
2020/07/01 Python
Python如何重新加载模块
2020/07/29 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
社团活动总结
2014/04/28 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
小学推普周活动总结
2015/05/07 职场文书
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python