【vue拖拽列表】Vue.Draggable

一、目的

• 实现 两个列表 互相拖动
• Vue.Draggable 就是基于 Sortable.js 的允许拖放和视图模型数组同步的组件，避免了我们常说的重复造轮子，有了它省了我们很多事情。它基于 Sortable.js 并提供 Sortable.js 的所有功能！

---

二、开源地址

1. GitHub:

   🌞
   https://github.com/SortableJS/Vue.Draggable

2. 演示地址

   🌝
   https://sortablejs.github.io/Vue.Draggable/#/two-lists

三、安装和使用

1. 安装

• git里面 - vue2
  
• 之前安装的版本都不对 重新安装 如果看过我上一个博 不要用那个方法 用我下面的方法
  • 👉🏻 cnpm i -S sass-loader
  • 👉🏻 cnpm i -S node-sass
  • 👉🏻 cnpm i -S jquery

2.使用

• ① 选择自己需要的
• ② 点view code
  

---

• ① 示例中 import
  • 注意看 自己 下载的 位置和名字，别 全 照搬
  • import draggable from 'vuedraggable'
• ② 引入组件
• 就写在 本页 就行

---

四、示例

• 我自己做的代码
• 引入了 后端 的 动态数据

<!--* 静态html *-->

				 <!-- 第1列 -->
                  <div class="row">
                    <!-- 第1列第1组-任务组 -->
                    <div class="col-3">
                      <h3>任务组列表</h3>
                      <draggable class="dragArea list-group" :list="list0"
                        :group="{ name: 'people', pull: 'clone', put: false }">
                        <div class="list-group-item" v-for="element in list0" :key="element.name">
                          {{ element.name }}
                        </div>
                      </draggable>
                    </div>
                    <!-- 第1列第2组-单任务 -->
                    <div class="col-3">
                      <h3>子任务类型列表</h3>
                      <draggable class="dragArea list-group" :list="list1"
                        :group="{ name: 'people', pull: 'clone', put: false }">
                        <div class="list-group-item" v-for="element in list1" :key="element.order">
                          {{ conversion(element.type) }}
                        </div>
                      </draggable>
                    </div>
                  </div>
               
                <!-- 第2列-拖拽可排序列表 -->
                  <div class="drag">
                    <div class="col-3">
                      <draggable class="dragArea list-group" :list="list2" group="people">
                        <!-- 循环得到列表+点击列表事件 -->
                        <div class="pic-box" v-for="(element, index) in list2" :key="element.order"
                          @click="dragClick(element)">
                        </div>
                      </draggable>
                    </div>
                  </div>

<!--* import 引用 *-->

import draggable from 'vuedraggable'
import rawDisplayer from '../../../components/vuedraggable/raw-displayer.vue';

<!--* js 部分 *-->
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  components: {
    draggable,
    rawDisplayer
  },

data(){
	return:{
	  list0: [
        { name: "搬运货架", id: 1 },
        { name: "整托出库", id: 2 },

      ],
      list1: [
        { name: "移动举升", id: 3 },
        { name: "移动放下", id: 4 },
        { name: "移动", id: 5 },

      ],
      list2: [
        { name: "Juan", id: 6 },
        { name: "Edgard", id: 7 },
        { name: "Johnson", id: 8 }
      ],
	}
}

补： raw-displayer 得引用 代码如下

<!--* raw-displayer.vue *-->

<template>
    <div>
      <h3>{{ title }}</h3>
      <pre>{{ valueString }}</pre>
    </div>
  </template>
  <script>
  const props = {
    name: "raw-displayer",
    title: {
      required: true,
      type: String
    },
    value: {
      required: true
    }
  };
  export default {
    props,
    computed: {
      valueString() {
        return JSON.stringify(this.value, null, 2);
      }
    }
  };
  </script>
  <style scoped>
  pre {
    text-align: start;
  }
  </style>