VUE使用draggable实现组件拖拽


Posted in Vue.js onApril 06, 2022

实现步骤
1、导入draggable依赖

npm i -S vuedraggable


2、引入draggable

import draggable from "vuedraggable"


3、注册draggable

  components: {
     draggable
  },


4、使用draggable
html页面

    <div class="col-md-3">
      <draggable
        class="list-group"
        tag="ul"
        :list="this.list"
        v-bind="dragOptions"
        :move="onMove"
        @start="isDragging = true"
        @end="isDragging = false"
      >
        <div
          class="list-group-item"
          v-for="(item, index) in this.list"
          :key="item.value"
        >
          <span class="badge">{{ index }}</span>
          <span class="lefttitle">
            {{ item.name }}
          </span>
        </div>
      </draggable>
    </div>


定义属性和list 

 data() {
    return {
      list: [
        {
          name: "-姓名",
          value: "name",
        },
        {
          name: "-性别",
          value: "sex",
        },
        {
          name: "-年龄",
          value: "age",
        },
        {
          name: "-地址",
          value: "address",
        },
        {
          name: "-邮箱",
          value: "mailbox",
        },
      ],
      editable: true, //决定是否可拖动,为false则组件不可拖动
      isDragging: false,
    };
  },


定义移动方法

methods: {
 
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
  },


5、完整VUE代码

<template>
  <div class="fluid container">
    <div class="form-group form-group-lg panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">组件拖拽实例</h3>
      </div>
      <div class="panel-body">
        <div class="checkbox">
          <label
            ><input type="checkbox" v-model="editable" />设置组件可拖拽</label
          >
        </div>
      </div>
    </div>
 
    <div class="col-md-3">
      <draggable
        class="list-group"
        tag="ul"
        :list="this.list"
        v-bind="dragOptions"
        :move="onMove"
        @start="isDragging = true"
        @end="isDragging = false"
      >
        <div
          class="list-group-item"
          v-for="(item, index) in this.list"
          :key="item.value"
        >
          <span class="badge">{{ index }}</span>
          <span class="lefttitle">
            {{ item.name }}
          </span>
        </div>
      </draggable>
    </div>
 
    <div class="list-group col-md-3">
      <pre>{{ listString }}</pre>
    </div>
  </div>
</template>
 
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        {
          name: "-姓名",
          value: "name",
        },
        {
          name: "-性别",
          value: "sex",
        },
        {
          name: "-年龄",
          value: "age",
        },
        {
          name: "-地址",
          value: "address",
        },
        {
          name: "-邮箱",
          value: "mailbox",
        },
      ],
      list2: [],
      editable: true, //决定是否可拖动,为false则组件不可拖动
      isDragging: false,
      delayedDragging: false,
    };
  },
  methods: {
 
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      return (
        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
      );
    },
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: "description",
        disabled: !this.editable,
        ghostClass: "ghost",
      };
    },
    listString() {
      return JSON.stringify(this.list, null, 2);
    },
  },
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    },
  },
};
</script>
 
<style>
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
}
.list-group-item i {
  cursor: pointer;
}
</style>

 

Vue.js 相关文章推荐
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
vue+element UI实现树形表格
Dec 29 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
教你部署vue项目到docker
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 #Vue.js
vue中div禁止点击事件的实现
Apr 02 #Vue.js
Vue组件更新数据v-model不生效的解决
Apr 02 #Vue.js
Vue+TypeScript中处理computed方式
Apr 02 #Vue.js
Vue+Flask实现图片传输功能
Apr 01 #Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 #Vue.js
You might like
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
angular分页指令操作
2017/01/09 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
python实现TF-IDF算法解析
2018/01/02 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python实现的特征提取操作示例
2018/12/03 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
代理协议书
2014/04/22 职场文书
作文评语大全
2014/04/23 职场文书
退学证明范本3篇
2014/10/29 职场文书
结婚保证书
2015/01/16 职场文书
童年读书笔记
2015/06/26 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python