基于vue-draggable 实现三级拖动排序效果

当我们需要实现在前端页面中完成三级拖动排序效果的时候，可以使用vue-draggable组件来完成。具体实现步骤如下：

步骤一：安装vue-draggable

首先要安装vue-draggable组件：

npm install vuedraggable

步骤二：定义基本结构

在Vue组件中，我们需要定义一些基本的结构，包括三个列表，两个按钮等。可以参考以下代码：

<template>
  <div>
    <div class="list-title">一级列表</div>
      <draggable v-model="firstLevelList" :move="checkMove" class="list">
        <div v-for="(item, index) in firstLevelList" :key="index">
          <div class="item">{{ item.name }}</div>
          <div class="arrow" v-if="item.children.length" @click="toggleSecondLevel(item)">{{ item.show ? '收起' : '展开' }}</div>
          <draggable v-if="item.show" v-model="item.children" class="list">
            <div v-for="(chitem, chindex) in item.children" :key="chindex">
              <div class="item">{{ chitem.name }}</div>
              <div class="arrow" v-if="chitem.children.length" @click="toggleThirdLevel(chitem)">{{ chitem.show ? '收起' : '展开' }}</div>
              <draggable v-if="chitem.show" v-model="chitem.children" class="list">
                <div v-for="(thitem, thindex) in chitem.children" :key="thindex">
                  <div class="item">{{ thitem.name }}</div>
                </div>
              </draggable>
            </div>
          </draggable>
        </div>
      </draggable>
    <div class="btn-wrap">
      <button @click="addFirstLevel">添加一级列表</button>
      <button @click="resetList">重置</button>
    </div>
  </div>
</template>

步骤三：绑定数据

在Vue组件中，我们需要绑定一些数据，包括三个列表的数据、拖动行为相关数据等，可以参考以下代码：

<script>
import draggable from 'vuedraggable'

export default {
  data() {
    return {
      firstLevelList: [
        { name: '一级列表1', children: [], show: true },
        { name: '一级列表2', children: [], show: true },
        { name: '一级列表3', children: [], show: true },
      ],
      dragSettings: {
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: 'ghost'
      }
    }
  },
  components: {
    draggable
  },
  methods: {
    checkMove: function(evt) {
      if (evt.dragged.parentElement.classList.contains('list')) {
        return true
      } else {
        return false
      }
    },
    toggleSecondLevel(item) {
      this.$set(item, 'show', !item.show)
    },
    toggleThirdLevel(item) {
      this.$set(item, 'show', !item.show)
    },
    addFirstLevel() {
      this.firstLevelList.push({ name: `一级列表${this.firstLevelList.length + 1}`, children: [], show: true })
    },
    resetList() {
      this.firstLevelList = [
        { name: '一级列表1', children: [], show: true },
        { name: '一级列表2', children: [], show: true },
        { name: '一级列表3', children: [], show: true },
      ]
    }
  }
}
</script>

步骤四：添加样式

最后，我们需要添加一些基本的样式，定义列表、按钮等的样式。可以参考以下代码：

<style>
.list {
  background-color: #efefef;
  padding: 10px;
  margin-bottom: 10px;
}
.item {
  background-color: #fff;
  padding: 10px;
  cursor: move;
  border-bottom: 1px solid #ddd;
}
.arrow {
  padding-left: 20px;
  cursor: pointer;
  color: #333;
  font-size: 14px;
}
.arrow:hover {
  color: #1890ff;
}
.list-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.btn-wrap {
  margin-top: 20px;
  text-align: center;
}
button {
  padding: 5px 20px;
  cursor: pointer;
  margin-right: 10px;
  border: none;
  background-color: #1890ff;
  color: #fff;
  font-size: 14px;
}
button:hover {
  background-color: #096dd9;
}
.ghost {
  opacity: 0.5;
}
</style>

通过上述步骤，我们可以实现一个基于vue-draggable组件的三级拖动排序效果。

示例说明1：JSFiddle demo

示例说明2：

现在，假设我们有一个需求：在三级列表中保持元素的顺序，但是在拖动到新的位置时，自动将元素移到父级列表的底部。我们可以通过以下代码来实现这个需求：

checkMove: function(evt) {
  if (evt.dragged.parentElement.classList.contains('list')) {
    let oldIndex = evt.oldIndex
    let newIndex = evt.newIndex
    let parentList = evt.dragged.parentElement.__vue__.items
    let item = parentList.splice(oldIndex, 1)[0]
    parentList.splice(parentList.length, 0, item)
    return false
  } else {
    return false
  }
}

在该代码中，我们首先分别获取新旧的元素位置，以及父级列表。然后，通过splice将元素从旧位置移除，并将其添加到父级列表的末尾。

示例说明2：JSFiddle demo