vue3 - Vue3 和 vue-draggable-next 实现拖拽时的虚线蓝块效果？

Question

这种点击拖拽的时候，当前框有个虚线蓝块是怎么实现的？如果移入到右边的框，则右边的框显示虚线蓝块，总之，移入在哪个div中的时候都会显示一个虚线蓝块。

目前使用了vue3和vue-draggable-next，使用了 start事件和move，并未实现

Answer 1

可以添加自定义样式，在线demo

<draggable ghost-class="ghost" />.ghost {  border: dashed 1px rgb(19, 41, 239) !important;}

Sortable#options

Answer 2

在 Vue3 和 vue-draggable-next 中实现拖拽时的虚线蓝块效果，你需要在拖拽过程中通过 CSS 来动态地为被拖拽或目标元素添加样式。下面是一个基本的实现思路：

1. 定义 CSS 样式：首先，你需要定义一个 CSS 样式，用来显示虚线蓝块。这可以通过使用伪元素和边框样式来实现。

.drag-highlight {  position: absolute;  z-index: 999;  border: 2px dashed blue;  pointer-events: none;}

2. 添加和移除样式：在 Vue 组件中，你需要监听 start 和 move 事件。在 start 事件中，你可以为被拖拽的元素添加这个样式。在 move 事件中，你需要根据鼠标的位置来更新这个样式的位置，或者移除它。

<template>  <draggable v-model="list" :start="dragStart" @move="dragMove">    <div      v-for="(item, index) in list"      :key="item.id"      class="draggable-item"      :class="{ 'drag-highlight': isDragging && draggingIndex === index }"    >      {{ item.name }}    </div>  </draggable></template><script>import { ref } from 'vue';import draggable from 'vuedraggable';export default {  components: {    draggable,  },  setup() {    const list = ref([      // ... 你的列表数据    ]);    const isDragging = ref(false);    const draggingIndex = ref(null);    const dragStart = (event) => {      isDragging.value = true;      draggingIndex.value = event.oldIndex;    };    const dragMove = (event) => {      if (!isDragging.value) return;      // 根据鼠标位置更新虚线蓝块的位置      const rect = event.related.getBoundingClientRect();      // 假设你要在这里更新虚线蓝块的位置      // 例如，你可能需要设置一个 data 属性或 Vuex 状态来存储这个信息      // 然后在 CSS 中使用这个信息来定位虚线蓝块    };    return {      list,      isDragging,      draggingIndex,      dragStart,      dragMove,    };  },};</script>

注意：

• 在这个例子中，我使用了 draggable-item 类来定位拖拽的元素，并在其中添加了 drag-highlight 类来显示虚线蓝块。
• isDragging 和 draggingIndex 是两个响应式引用，分别用来指示是否正在拖拽以及当前被拖拽的元素的索引。
• 在 dragStart 事件中，我们设置 isDragging 为 true 并记录当前拖拽元素的索引。
• 在 dragMove 事件中，我们根据鼠标的位置来更新虚线蓝块的位置。这里的具体实现会取决于你的具体需求和布局。

这只是一个基本的实现思路，你可能需要根据你的具体需求来调整代码。例如，你可能需要更精确地计算虚线蓝块的位置，或者添加更多的交互逻辑。