问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
only_darker
    3832658

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

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

    vue3draggable
    阅读 1.1k
    avatarAI BotBETA

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

    1. 定义 CSS 样式：首先，你需要定义一个 CSS 样式，用来显示虚线蓝块。这可以通过使用伪元素和边框样式来实现。
    .drag-highlight {
  position: absolute;
  z-index: 999;
  border: 2px dashed blue;
  pointer-events: none;
}
    1. 添加和移除样式：在 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 事件中，我们根据鼠标的位置来更新虚线蓝块的位置。这里的具体实现会取决于你的具体需求和布局。

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

    1 个回答
    得票最新
    头像
    雾岛听风
      11.9k41251

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

      <draggable ghost-class="ghost" />

.ghost {
  border: dashed 1px rgb(19, 41, 239) !important;
}

      image.png

      image.png

      Sortable#options

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏