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

这篇文章主要介绍了Vue draggable怎么实现从左到右拖拽功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue draggable怎么实现从左到右拖拽功能文章都会有所收获，下面我们一起来看看吧。

具体效果如下

1、安装插件

npm install vuedraggable

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

import draggable from ‘vuedraggable'

3、注册组件

components:{undefineddraggable}

示例：

<div >    <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;}

注意事项：

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

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

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

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

关于“Vue draggable怎么实现从左到右拖拽功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue draggable怎么实现从左到右拖拽功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。