vue demo | 实现拖拽控制组件层级

背景介绍：工作需求 | 需要 实现页面自定义 的功能，其中有一部分需要配置页面的层级，越靠上的 z-index 越大，位于靠下的控件之上显示。页面层级区域，就好比图层，这些图层需要支持拖拽。该需求计划使用 vuedraggable 来实现。

先搭建一个简单的 vue2 工程，写一个简单的 demo，自行体验一下该组件的效果，先对 vue draggable 组件有一个初步的了解，比如 vue draggable 能做什么、该如何做。然后再添加到业务中……

demo 最终效果演示：

因为要实现自定义页面的需求，业务需求需要包含层级的控制功能。层级，就是如果自定义组件重叠了，那么层级高的在层级低的上边显示。层级的控制，需要支持拖拽的功能。

参考资料

• npm：https://www.npmjs.com/package/vuedraggable
• github：https://github.com/SortableJS/Vue.Draggable#readme
• 在线示例：https://sortablejs.github.io/Vue.Draggable/#/simple
• 中文文档（属性和事件都有对应的表格，很直观）：https://www.itxst.com/vue-draggable/tutorial.html

安装 vuedraggable

• yarn add vuedraggable
• npm i -S vuedraggable

vuedraggable 属性

vuedraggable 事件

源码

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <button @click="addItem">addItem</button>
    <draggable
      v-model="myArray"
      @start="drag = true"
      :force-fallback="true"
      animation="300"
      chosen-class="drag-chosen"
      ghost-class="drag-ghost"
    >
      <div v-for="(item, index) in myArray" :key="index" class="drag-item">
        {{ item.name }}
      </div>
    </draggable>
<pre>{{ myArrayWithZIndex }}</pre>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "App",
  components: {
    draggable,
  },
  data() {
    return {
      myArray: [
        {
          name: "item1"
        },
        {
          name: "item2"
        },
        {
          name: "item3"
        },
      ],
    };
  },
  computed: {
    myArrayWithZIndex() {
      const len = this.myArray.length;
      return this.myArray.map((it, index) => {
        it.zIndex = len - index;
        return it;
      });
    },
  },
  methods: {
    addItem() {
      const len = this.myArray.length;
      this.myArray.unshift({
        name: "item" + (len + 1),
        id: len + 1,
      });
    },
  },
};
</script>
<style>
#app {
  width: 50vw;
  margin: 60px auto 0;
  color: #2c3e50;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.drag-item {
  border: 1px solid #ddd;
  padding: 20px 10px;
  cursor: pointer;
}
.drag-chosen {
  border-color: #50b0ad;
}
.drag-ghost {
  background-color: #50b0ad;
  color: #fff;
}
</style>