Vue 实现元素拖动到另一个 div 内：技术详解

前端

2024-01-29 00:31:48

从div拖动到另一个div，有什么思路？

作为前端，我们经常会遇到布局的需求，尤其是拖拽布局。如果说整个画板是一个大的div的话，那么各个组件就是被放置在画板内的子div，而我们要实现的就是在各个div之间拖动组件。

准备工作

安装必要的库和依赖项，如 Vue.js、Vuex、gsap 等。
创建一个 Vue 项目，并添加必要的组件。
定义一个 Draggable 组件，用来处理拖动操作。
定义一个 Droppable 组件，用来处理放置操作。

功能实现

在 Draggable 组件中，使用 v-on:dragstart 和 v-on:dragend 事件来监听拖动操作。
在 Droppable 组件中，使用 v-on:drop 事件来监听放置操作。
在 Draggable 组件中，使用 gsap 库来实现拖动效果。
在 Droppable 组件中，使用 gsap 库来实现放置效果。

具体步骤

创建一个 Draggable 组件。

<template>
  <div class="draggable" v-on:dragstart="dragstart" v-on:dragend="dragend">
    {{ content }}
  </div>
</template>

<script>
import gsap from 'gsap';

export default {
  props: ['content'],
  methods: {
    dragstart(e) {
      e.dataTransfer.setData('text/plain', this.content);
      gsap.set(this.$el, { scale: 1.1 });
    },
    dragend(e) {
      gsap.set(this.$el, { scale: 1 });
    }
  }
};
</script>

创建一个 Droppable 组件。

<template>
  <div class="droppable" v-on:drop="drop">
    {{ content }}
  </div>
</template>

<script>
import gsap from 'gsap';

export default {
  props: ['content'],
  methods: {
    drop(e) {
      e.preventDefault();
      const data = e.dataTransfer.getData('text/plain');
      this.$emit('dropped', data);
      gsap.to(this.$el, { scale: 1.1, duration: 0.2, yoyo: true, repeat: 1 });
    }
  }
};
</script>

在 App.vue 中使用 Draggable 和 Droppable 组件。

<template>
  <div id="app">
    <Draggable content="Item 1" />
    <Droppable @dropped="onItemDropped" />
  </div>
</template>

<script>
import Draggable from './components/Draggable.vue';
import Droppable from './components/Droppable.vue';

export default {
  components: {
    Draggable,
    Droppable
  },
  methods: {
    onItemDropped(item) {
      console.log(`Item ${item} was dropped.`);
    }
  }
};
</script>