vue.draggable一款基于vue的拖拽插件

vue.draggable一款基于vue的拖拽插件

vue.draggable官方文档

官方文档很详细，请移步到官方文档。

安装

npm i -S vuedraggable

测试代码

<template>
  <div>
    <div class="color_box">
      <div class="one">一级</div>
      <div class="two">二级</div>
      <div class="three">三级</div>
    </div>
    <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div>
    <!--使用draggable组件-->
    <draggable
      v-model="list"
      chosenClass="chosen"
      forceFallback="true"
      group="people"
      @start="onStart"
      @end="onEnd"
    >
      <transition-group
        style="min-height: 6px; display: inline-block; width: 100%"
      >
        <div class="item" v-for="(element, index) in list" :key="index + 9">
          <span class="one"> {{ element.name }} =========一级 </span>
          <draggable
            v-model="element.list"
            chosenClass="chosen"
            forceFallback="true"
            animation="300"
            group="people"
            @start="onStart"
            @end="onEnd"
          >
            <transition-group
              style="min-height: 6px; display: inline-block; width: 100%"
            >
              <div class="item" v-for="(e, i) in element.list" :key="i + 999">
                <span class="two"> {{ e.name }} =========二级 </span>

                <draggable
                  v-model="e.list"
                  chosenClass="chosen"
                  forceFallback="true"
                  animation="300"
                  group="people"
                  @start="onStart"
                  @end="onEnd"
                >
                  <transition-group
                    style="min-height: 6px; display: inline-block; width: 100%"
                  >
                    <div
                      class="item"
                      v-for="(eA, iA) in e.list"
                      :key="iA + 999"
                    >
                      <span class="three"> {{ eA.name }} =========三级 </span>
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </transition-group>
          </draggable>
        </div>
      </transition-group>
    </draggable>

    <div class="btn" @click="clickBtn">按钮</div>
  </div>
</template>
<style lang="scss" scoped>
/*被拖拽对象的样式*/
.color_box {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  .one {
    background-color: #f56c6c;
    width: 150px;
    height: 50px;
    margin-right: 24px;
    color: #fdfdfd;
  }
  .two {
    background-color: #67c23a;
    width: 150px;
    height: 50px;
    margin-right: 24px;
    color: #fdfdfd;
  }
  .three {
    background-color: #e6a23c;
    width: 150px;
    height: 50px;
    margin-right: 24px;
    color: #fdfdfd;
  }
}
.item {
  cursor: move;
  margin-left: 24px;

  & > span {
    padding: 6px;
    background-color: #fdfdfd;
    border: solid 1px #eee;
    display: inline-block;
    margin: 6px 0;
    margin-left: 24px;
  }
  .one {
    background-color: #f56c6c;
  }
  .two {
    background-color: #67c23a;
  }
  .three {
    background-color: #e6a23c;
  }
}

/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}
</style>
<script>
//导入draggable组件
import draggable from "vuedraggable";
export default {
  //注册draggable组件
  components: {
    draggable,
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      list: [
        {
          people: "cn",
          id: 1,
          name: "小白",
          list: [
            {
              people: "cn",
              id: 2,
              name: "小白1",
              list: [],
            },
            {
              people: "cn",
              id: 3,
              name: "小白2",
              list: [
                {
                  people: "cn",
                  id: 4,
                  name: "小白33",
                  list: [],
                },
                {
                  people: "cn",
                  id: 5,
                  name: "小白33",
                  list: [],
                },
                {
                  people: "cn",
                  id: 6,
                  name: "小白33",
                  list: [],
                },
              ],
            },
          ],
        },
        {
          people: "cn",
          id: 7,
          name: "小红",
          list: [
            {
              people: "cn",
              id: 8,
              name: "小红1",
              list: [],
            },
            {
              people: "cn",
              id: 9,
              name: "小红2",
              list: [],
            },
          ],
        },
        {
          people: "cn",
          id: 10,
          name: "小绿",
          list: [
            {
              people: "cn",
              id: 11,
              name: "小绿1",
              list: [],
            },
            {
              people: "cn",
              id: 12,
              name: "小绿2",
              list: [],
            },
          ],
        },
        {
          people: "us",
          id: 13,
          name: "小粉",
          list: [
            {
              people: "us",
              id: 14,
              name: "小粉1",
              list: [],
            },
            {
              people: "us",
              id: 15,
              name: "小粉2",
              list: [],
            },
          ],
        },
      ],
    };
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
    clickBtn() {
      console.log(this.list);
    },
  },
};
</script>