Vue draggable实现从左到右拖拽功能

本文实例为大家分享了Vue draggable实现从左到右拖拽功能的具体代码,供大家参考,具体内容如下

1、安装插件

npm install vuedraggable

2、在需要使用的组件中引入

import draggable from ‘vuedraggable'

3、注册组件

components:{undefined
draggable
}

示例:

<div style="height: 1000px;">
    <div class="test-left">
      <!-- 左侧按钮 -->
      <draggable
        v-model="list1"
        draggable=".c-item"
        v-bind="dragOptionsL"
        :options="{sort: false, group: {name: 'field', pull:'clone',put: false}}"
      >
        <div v-for="(d,index) in list1" :key="index" class="item c-item">{{d.name}}</div>
      </draggable>
    </div>
    <div class="test-right">
      <!-- 右侧按钮 -->
      <draggable group="field" :list="list2" v-bind="dragOptionsR" @change="toChange">
        <div v-for="(d,k) in list2" :key="k" class="item">{{d.name}}</div>
      </draggable>
    </div>
</div>

<script>
import draggable from "vuedraggable";
export default {
  data() {
    return {
      list1: [
        { name: "11", id: 1 },
        { name: "22", id: 2 },
        { name: "33", id: 3 },
        { name: "44", id: 4 },
      ],
      list2: [
        { name: "5", id: 5 },
        { name: "6", id: 6 },
        { name: "7", id: 7 },
      ],
    };
  },
  components: {
    draggable,
  },
  computed: {
    dragOptionsL() {
      return {
        disabled: false,
        ghostClass: "ghostL", //注意:在左侧上下移动时,使用这个类;移动到右侧时,使用ghostR类
      };
    },
    dragOptionsR() {
      return {
        animation: 500,
        disabled: false,
        ghostClass: "ghostR", //注意:在右侧上下移动时,使用这个类
      };
    },
  },
  methods: {
    toChange(e) {
      console.log(e);
      if (e.added) {
        console.log(this.list2);
      }
    }
  }
};
</script>

<style>
.test-left {
  float: left;
  width: 300px;
}
.test-right {
  float: left;
  margin-left: 20px;
  width: 300px;
}
.test-right > div {
  min-height: 80px; /*为了防止右侧开始没有内容时不可以拖动*/
}
.item {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background: #f2f2f2;
  margin-bottom: 12px;
}

.ghostL {
  opacity: 0.5;
  width: 230px;
}
.ghostR {
  opacity: 0;
  width: 230px;
}

注意事项:

1.左边draggle插件,:group="{ name: ‘dragobj’, pull: ‘clone’, put: false}"
{ name: 'dragobj’取相同名字的可以来回拖拽;pull: 'clone’从左向右克隆,后面用右边draggle插件的dragChangeR()方法让左侧数据隐藏了,left并不是真正的删除这条数据;put: false 禁止从右向左拖放数据 }

2.options中的sort: false表示禁止上下拖动

3.问题:从左往右移动时,右侧一直会出现items的name值,拖拽结束后,name值消失
解决方法:左右分别绑定一个v-bind=“dragOptionsL”,v-bind=“dragOptionsR”

4.问题:当右侧没有任何的items时,需要给右侧v-for循环的父元素指定一个min-height,否则从左侧拖到右侧时,没有接收的地方,则拖放失效

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • vuedraggable+element ui实现页面控件拖拽排序效果

    项目要实现一些控件的拖拽排序.从而找到了这款vuedraggable控件,供大家参考,具体内容如下 如上图要实现这些控件的拖拽排序 这是拖拽后 由于公司网络的原因,项目没有使用npm,都是使用的引入的js <script type="text/javascript" src="lib/sortable/Sortable.min.js"></script> <script type="text/javascript"

  • Vue.Draggable实现拖拽效果

    快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json "dependencies": { "element-ui": "^1.3.4", "less": "^2.7.2", "less-loader": "^4.0.4", "vue":

  • Vue.Draggable拖拽功能的配置使用方法

    本文实例为大家分享了Vue.Draggable拖拽功能的具体代码,供大家参考,具体内容如下 使用cmd命令在项目根目录下下载安装Vue.Draggable npm install vuedraggable 在组件中需要使用的引入 import draggable from 'vuedraggable' 注册组件 components:{ draggable } vue的template代码如 <draggable v-model="itemlis" //开始移动方法 :move=

  • vue拖拽组件vuedraggable使用说明详解

    vue拖拽组件vuedraggable的使用说明,供大家参考,具体内容如下 需了解H5的draggable属性,通过下面的代码注释,可了解 <!DOCTYPE html>   <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-widt

  • 利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序

    Vue-draggable 的github传送门 : https://github.com/SortableJS/Vue.Draggable 一. 下载依赖包:npm install vuedraggable -S  二. 在需要使用的当前界面引入依赖,注册组件: import draggable from "vuedraggable"; export default { components: { draggable, } 三. 在template 中建立表格,分别写出thead 部

  • vuedraggable实现拖拽功能

    本文实例为大家分享了vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下 一.下载依赖 npm i -S vuedraggable 二.代码块 <template>     <div>     <a-checkbox-group @change="onChange">         <draggable  group="people"             class="list-group

  • vue3使用vuedraggable实现拖拽功能

    本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下 1.npm i vuedraggable -S,使用这个命令,vue3会报错,如下图 2.使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedraggable@next下载最新版 3.vue使用代码如下: <template>   <div>     <h1 class="title">拖拽<

  • VUE使用draggable实现组件拖拽

    实现步骤1.导入draggable依赖npm i -S vuedraggable2.引入draggableimport draggable from "vuedraggable"3.注册draggable  components: {     draggable  },4.使用draggablehtml页面    <div class="col-md-3">      <draggable        class="list-group

  • 使用vuedraggable实现从左向右拖拽功能

    本文实例为大家分享了使用vuedraggable实现从左向右拖拽的具体代码,供大家参考,具体内容如下 1 功能描述 使用vuedraggable实现从左边框中拖拽到右边的框中,左边的框不能随意拖拽改变位置,不能向左边框中拖拽组件.右边框中的组件可以拖动位置,但不能拖入到左边框里. 注意事项如下: (1)draggable的group中的name属性必须一致: (2)左边框中的draggable必须含有以下属性,group中的pull:'clone'属性表示可以生成新的组件:group中的put:

  • Vue draggable实现从左到右拖拽功能

    本文实例为大家分享了Vue draggable实现从左到右拖拽功能的具体代码,供大家参考,具体内容如下 1.安装插件 npm install vuedraggable 2.在需要使用的组件中引入 import draggable from 'vuedraggable' 3.注册组件 components:{undefined draggable } 示例: <div style="height: 1000px;">     <div class="test-

  • Vue组件Draggable实现拖拽功能

    Draggable为基于Sortable.js的vue组件,用以实现拖拽功能. 具体说明,请参考:学习链接 npm官方演示: vuedraggable特性: 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时,可以抛出所有变化 可以和现有的UI组件兼容 使用 安装: npm install vuedraggable 页面引入: import draggable from 'v

  • 基于Vue 撸一个指令实现拖拽功能

    之前撸了一个copy 指令,这次再撸一个拖拽指令.. 具体是个什么蛇皮玩意儿呢,大概就像介样: emmm..没错,看起来就是如此的鸡肋,但是莫得办法,大佬喜欢啊. 由于我们项目中用的是 element-ui ,所有这个指令只针对 element-ui 的对话框组件哈,如果你们用的别的 ui 库也有这个需求的,涂涂改改应该也能用.. 其实这个拖拽的原理还是很简单的: 1.首先鼠标按下( onmousedown ) 记录目标元素当前的 left 和 top 值 2.鼠标移动( onmousemove

  • vue实现放大缩小拖拽功能

    本文实例为大家分享了vue实现放大缩小拖拽功能的具体代码,供大家参考,具体内容如下 点击放大至全屏 再次点击缩小至原始  这个弹框是基于element dialog的基础上写的 1.再utils文件夹下面新建一个directives.js  (封装好了 直接拿去用) import Vue from 'vue'; import bigPic from '../assets/images/bigChange.png'; // v-dialogDrag: 弹窗拖拽属性 Vue.directive('d

  • Vue使用vue-draggable 插件在不同列表之间拖拽功能

    今天分享一个vue项目中在不同列表拖拽设置选项的功能,这个功能也是在做项目中遇到的,先说下这个功能的要点(参考下图),有2个列表,左侧列表展示已选,右侧列表展示未选,通过拖拽进行设置,已选的选项不能超过4个,超过的话自动将拖拽之前的最后一项清除到右侧,且如果从已选往未选里拖的时候,右侧显示垃圾桶的提示(如图). 拖拽功能图片: 垃圾桶显示图: 首先讲讲vue-draggable的使用 安装vue-draggable: npm install vuedraggable 在使用插件的组件内引入vue

  • vue elementui tree 任意级别拖拽功能代码

    我的是根据父级id做的一些判断 <el-tree draggable :allow-drop="allowDrop" @node-drop="sort" accordion style="font-size:14px;width:250px;" ref="tree" :data="catalogList" :props="defaultProps" :expand-on-click

  • vue element el-transfer增加拖拽功能

    芯资管项目要求el-transfer增加拖拽排序,左右上下互相拖拽功能: 原来的组件不支持拖拽,这里要用个第三方脱宅组件sortablejs 首先安装 sudo npm i sortablejs --save-dev html代码 <template> <el-transfer ref="transfer" id="transfer" v-model="value" :data="data"> <

  • vue项目中实现el-dialog组件可拖拽效果

    目录 0. 首先上图,看效果 1. 实现方法 参考资料 0. 首先上图,看效果 1. 实现方法 第一步:创建 drag.js文件 实现拖拽源码 /**  * 拖拽移动  * @param  {elementObjct} bar 鼠标点击控制拖拽的元素  * @param {elementObjct}  target 移动的元素  * @param {function}  callback 移动后的回调  */ export function startDrag(bar, target, call

随机推荐