GIF.gif

由于公司有个需求，所以学习了这个插件.演示图下面是代码块

超性感标记语言.html

<template>
  <div class="Independent">
    <div class="groupbox">
      <div @drop="ondrop(item,index)" v-for="(item, index) in list" :key="index" class="listbox">
        <!-- 卡片头 -->
        <div class="topbar">{{item.name}}</div>

        <draggable element="span" v-model="item.list" v-bind="dragOptions" @add="onadd">
          <transition-group name="no" class="list-group" tag="div">
            <li
              class="list-group-item"
              @dragend="ondragend(item,index)"
              v-for="(element,indexs) in item.list"
              :key="indexs"
            >
              <div class="liitem">
                {{element.model}}
                <span class="badge">{{indexs}}</span>
              </div>
            </li>
          </transition-group>
        </draggable>
      </div>

      <!-- 新建卡片 -->
      <div class="listbox">
        <div class="topbar">
          <i class="el-icon-circle-plus-outline" @click="addcard"></i>新建卡片
        </div>
      </div>
    </div>
    <div class="groupbox">
      <!-- 双向绑定的数据 -->
      <div class="bangding">
        <!-- <div class="list-group col-md-3">
        <pre>{{listString}}</pre>
        </div>-->
        <div v-for="(item, index) in list" :key="index" class="listdata">
          <pre>{{list[index].list}}</pre>
        </div>
      </div>

      <!-- 新建卡片 -->
    </div>
  </div>
</template>

注入灵魂.js

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。

如果没有下载draggable 请在node.js
输入神秘车牌号npm i vuedraggable --save
不推荐全局引用,需要的时候注入灵魂就行了.import draggable from 'vuedraggable'

<script>
// 注入灵魂
import draggable from "vuedraggable";
import $ from "jquery";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import { log } from "util";
export default {
  props: {},
  data() {
    return {
      list: [
        {
          name: "火象星座",
          list: [
            {
              model: "双鱼座"
            },
            {
              model: "水瓶座"
            },

            {
              model: "摩羯座"
            },
            {
              model: "射手座"
            },
            {
              model: "天蝎座"
            }
          ]
        },
        {
          name: "土象星座",
          list: [
            {
              model: "金牛座"
            },
            {
              model: "双子座"
            },
            {
              model: "白羊座"
            },
            {
              model: "金牛座"
            },
            {
              model: "巨蟹座"
            },
            {
              model: "射手座"
            }
          ]
        },
        {
          name: "风象星座",
          list: [
            {
              model: "天秤座"
            },
            {
              model: "处女座"
            },
            {
              model: "狮子座"
            }
          ]
        },
        {
          name: "水象星座",
          list: []
        }
      ],
      // editable: true,//是否能滑动
      isDragging: false,
      delayedDragging: false,
      //拖出母元素的下标
      ondragendindex: "",
      //拖入母元素的下标
      ondropindex: "",
      //拖出子列表下标
      evtoldIndex: "",
      //拖出子列表下标
      evtnewIndex: ""
      //拖入子列表下标
    };
  },
  computed: {
    // 滑动卡片配置
    dragOptions() {
      return {
        animation: 0,
        sort: false,
        store: false,
        group: "description",
        disabled: false, //是否禁止滑动
        ghostClass: "ghost",
        dragClass: "dragClass",
        chosenClass: "dragClass"
      };
    }
  },
  created() {},
  mounted() {},
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true;
        return;
      }
      this.$nextTick(() => {
        this.delayedDragging = false;
      });
    }
  },
  methods: {
    addcard(){
      this.list.push({
          name: "新建的卡牌",
          list: []
        })
        console.log(this.list);
        
    },
    //用户完成母元素拖动后触发
    ondragend(item, index) {
      // console.log("```用户完成拖出后触发```");
      // console.log('开始拖动的元素'+item);
      console.log("拖出的母元素的下标" + index);
      this.ondragendindex = index;
      console.log(this.list[this.ondropindex].list[this.evtnewIndex].model);
    },
    //监听拖入母元素的下标
    ondrop(element, index) {
      // console.log("```用户完成拖入后触发```");
      console.log("拖入母元素的下标" + index);
      this.ondropindex = index;
    },
    // 监听滑动添加时
    onadd(evt) {
      var itemEl = evt.item; // dragged HTMLElement
      evt.to; // target list
      evt.from; // previous list
      evt.oldIndex; // tag's old index within old parent
      evt.newIndex; // tag's new index within new parent
      evt.clone; // the clone tag
      evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
      console.log("移出子列表下标" + evt.oldIndex);
      console.log("拖入子列表下标" + evt.newIndex);
      this.evtoldIndex = evt.oldIndex;
      this.evtnewIndex = evt.newIndex;
    }
  },
  components: {
    draggable
  }
};
</script>

五颜六色.less

<style scoped lang="less">
.Independent {
  .groupbox {
    white-space: nowrap;
    overflow-x: auto;
    background-color: skyblue;

    width: 1800px;
    // height: 50vh;
    margin: 0 auto;
    .listbox {
      // margin: 0px 10px;
      overflow: hidden;
      display: inline-block;
      // border-left: 1px solid black;
      // border-bottom: 1px solid black;
      box-sizing: border-box;
      box-sizing: border-box;
      width: 300px;
      height: 400px;
      background-color: skyblue;
      .topbar {
        margin: 0px 10px;
        margin-right: 16px;
        background-color: white;
        text-align: center;
        border-bottom: 1px solid skyblue;
        box-sizing: border-box;
        height: 58px;
        line-height: 58px;
        color: #666666;
        border: 1px solid #ddd;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      .list-group {
        overflow-y: scroll;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        padding: 10px;
        padding-right: 8px;
        padding-top: 0px;
        height: 320px;
        box-sizing: border-box;
        // border: #666666 1px solid;
      }
      .list-group-item {
        cursor: pointer;
        background-color: #f9f9fa;
        padding: 0px 10px;

        padding-top: 10px;
        // background-color: #fff;
        // border: 0px solid #ddd;
        border-bottom: 0px solid black;
        border-top: 0px;
        :hover {
          background-color: #666666;
        }
        .liitem {
          background-color: white;
          border: 1px solid #eaeaea;
          border-left: 5px salmon solid;
          box-sizing: border-box;
          padding: 10px;
        }
      }
      // 移动样式
      .flip-list-move {
        transition: transform 0.5s;
      }

      .no-move {
        transition: transform 0s;
      }

      .ghost {
        opacity: 0.7;
        // background: #cccccc;
      }
    }
    .listdata {
      overflow: hidden;
      display: inline-block;
      // border: 1px solid black;
      box-sizing: border-box;
      width: 300px;
      min-height: 400px;
      background-color: #f9f9fa;
    }
  }
  .bangding {
    margin-top: 10px;
    display: flex;
  }
}
</style>