Vuedraggable组件与Element UI的提示气泡导致拖拽冲突的解决方案

2023-09-13 15:50:14

问题

在开发项目时，我遇到一个问题：使用Vuedraggable这个框架来拖拽A区域内的Vue组件到B区域中时，B区域内的Vue组件在标题上使用的Element UI的提示气泡会与拖拽操作冲突，导致拖拽无法正常进行。

问题分析

通过分析发现，当拖拽A区域内的Vue组件时，Vuedraggable会生成一个临时的拖拽元素，并将该元素插入到B区域中。而Element UI的提示气泡也是通过创建一个临时的元素来实现的，并且该元素的位置与拖拽元素的位置重叠。因此，当拖拽元素与提示气泡元素重叠时，就会导致拖拽操作无法正常进行。

解决方案

为了解决这个问题，可以将Element UI的提示气泡元素的z-index值设置为比拖拽元素的z-index值更高的值。这样，当拖拽元素与提示气泡元素重叠时，拖拽元素就会位于提示气泡元素之上，从而避免了拖拽冲突。

代码示例

<template>
  <div>
    <a-draggable :list="list" v-model="selected">
      <template #item="{ item }">
        <div>{{ item }}</div>
      </template>
    </a-draggable>
    <a-tooltip :open="true" content="提示气泡" placement="bottom">
      <div>
        B区域
      </div>
    </a-tooltip>
  </div>
</template>

<script>
import { ref } from 'vue'
import { Draggable, Tooltip } from 'element-ui'
import { vuedraggable } from '@vueuse/core'

export default {
  components: { Draggable, Tooltip },
  setup() {
    const list = ref(['Item 1', 'Item 2', 'Item 3'])
    const selected = ref([])

    vuedraggable(list, { selected })

    return { list, selected }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', 'Helvetica', 'Arial', sans-serif;
}

.draggable-item {
  padding: 10px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  cursor: move;
}

.selected-item {
  background-color: #ccc;
}

.tooltip {
  position: absolute;
  z-index: 9999;
}
</style>