VUE 拖拽功能探索 - 多层嵌套拖拽实现攻略

2023-05-20 00:10:35

VUE.DRAGGABLE中实现多层嵌套拖拽：分层整理的不二法门

在项目开发中，拖拽功能常常扮演着举足轻重的角色，帮助我们轻松实现元素排序、分类等操作。而VUE.DRAGGABLE则是这一领域的佼佼者，可以轻而易举地助你实现各类拖拽功能。今天，我们将深入探讨如何在VUE.DRAGGABLE中构建多层嵌套拖拽，让你在复杂的结构中也能游刃有余。

入门基础

首先，我们需要在组件中引入VUE.DRAGGABLE，并将其注册为全局组件。这就好比为我们的拖拽功能打下坚实的地基：

import Vue from 'vue'
import VueDraggable from 'vuedraggable'

Vue.component('draggable', VueDraggable)

接下来，在组件模板中加入一个可拖拽容器，为我们的元素提供一个可以自由移动的舞台：

<template>
  <draggable v-model="list">
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
  </draggable>
</template>

驾驭多层嵌套

当我们希望在拖拽区域内嵌套多层时，一个巧妙的技巧就派上了用场。在拖拽区域上添加一个class名称，并设置draggable='.class名'。这样一来，我们就划定了一个边界，确保拖拽区域内部分可以自由移动，而其他部分则岿然不动：

<template>
  <draggable v-model="list" class="draggable-area">
    <div v-for="(item, index) in list" :key="index">
      <div class="item">
        {{ item }}
      </div>
    </div>
  </draggable>
</template>

化解点击事件冲突

当我们在拖拽元素时，难免会触发元素上的点击事件。为了防止两者冲突，就像在交通路口设置红绿灯一样，我们需要使用.stop和.prevent修饰符来禁止默认事件和冒泡。这就好比在拖拽过程中给点击事件按下了暂停键：

<template>
  <draggable v-model="list" class="draggable-area">
    <div v-for="(item, index) in list" :key="index">
      <div class="item" @click.stop.prevent>
        {{ item }}
      </div>
    </div>
  </draggable>
</template>