Vue Moveable 开源项目教程

项目介绍

Vue Moveable 是一个基于 Vue.js 的开源库，用于创建可移动、可调整大小、可旋转等交互式元素。它提供了丰富的 API 和事件，使得开发者可以轻松地在 Vue 项目中实现复杂的交互效果。Vue Moveable 是 Moveable 项目的 Vue 版本，继承了 Moveable 的核心功能，并针对 Vue 进行了优化和扩展。

项目快速启动

安装

首先，你需要在你的 Vue 项目中安装 Vue Moveable：

npm install vue-moveable

基本使用

在你的 Vue 组件中引入并使用 Vue Moveable：

<template>
  <div>
    <vue-moveable
      :target="target"
      :draggable="true"
      :resizable="true"
      @drag="onDrag"
      @resize="onResize"
    />
    <div ref="target" style="width: 100px; height: 100px; background-color: red;"></div>
  </div>
</template>

<script>
import VueMoveable from 'vue-moveable';

export default {
  components: {
    VueMoveable,
  },
  data() {
    return {
      target: null,
    };
  },
  mounted() {
    this.target = this.$refs.target;
  },
  methods: {
    onDrag({ target, transform }) {
      target.style.transform = transform;
    },
    onResize({ target, width, height, dist }) {
      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
    },
  },
};
</script>

<style>
.moveable {
  position: absolute;
  top: 0;
  left: 0;
}
</style>

应用案例和最佳实践

案例一：自定义拖拽元素

在实际项目中，你可能需要自定义拖拽元素的样式和行为。以下是一个自定义拖拽元素的示例：

<template>
  <div>
    <vue-moveable
      :target="target"
      :draggable="true"
      :resizable="true"
      @drag="onDrag"
      @resize="onResize"
    />
    <div ref="target" class="custom-element">拖拽我</div>
  </div>
</template>

<script>
import VueMoveable from 'vue-moveable';

export default {
  components: {
    VueMoveable,
  },
  data() {
    return {
      target: null,
    };
  },
  mounted() {
    this.target = this.$refs.target;
  },
  methods: {
    onDrag({ target, transform }) {
      target.style.transform = transform;
    },
    onResize({ target, width, height, dist }) {
      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
    },
  },
};
</script>

<style>
.custom-element {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

案例二：多元素拖拽

在某些场景下，你可能需要同时拖拽多个元素。以下是一个多元素拖拽的示例：

<template>
  <div>
    <vue-moveable
      :target="targets"
      :draggable="true"
      @drag="onDrag"
    />
    <div ref="target1" class="element">元素1</div>
    <div ref="target2" class="element">元素2</div>
  </div>
</template>

<script>
import VueMoveable from 'vue-moveable';

export default {
  components: {
    VueMoveable,
  },
  data() {
    return {
      targets: [],
    };
  },
  mounted() {
    this.targets =