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
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
基于vuex实现购物车功能
Jan 10 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
Vue如何清空对象
Mar 03 Vue.js
vue封装数字翻牌器
Apr 20 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制作图型计数器的例子
2006/10/09 PHP
Zend 输出产生XML解析错误
2009/03/03 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Ext JS 实现建议词模糊动态搜索功能
2017/05/13 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python实现字典依据value排序
2016/02/24 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
对python多线程与global变量详解
2018/11/09 Python
浅析使用Python搭建http服务器
2019/10/27 Python
学python需要去培训机构吗
2020/07/01 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
2014年五一促销活动方案
2014/03/09 职场文书
实习评语大全
2014/04/26 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
大学军训心得体会800字
2016/01/11 职场文书