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实现点击当前行变色
Dec 14 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vuex的使用步骤
Jan 06 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP使用mysql_fetch_object从查询结果中获取对象集的方法
2015/03/18 PHP
PHP7内核之Reference详解
2019/03/14 PHP
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
Python实现基本线性数据结构
2016/08/22 Python
Python排序搜索基本算法之堆排序实例详解
2017/12/08 Python
python opencv之SURF算法示例
2018/02/24 Python
python3实现磁盘空间监控
2018/06/21 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
如何用python实现一个HTTP连接池
2021/01/14 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
预备党员的自我评价
2014/03/12 职场文书
停车场管理制度范本
2015/08/05 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python