Mr-Pro / vue-drag-resize-rotate

一个Vue组件，支持拖拽，拉伸，旋转，放缩，自动对齐；A Vue component that supports dragging, stretching, rotating, scaling, and auto-alignment;

vue-drag-resize-rotate

踩坑提示

同时拖动的元素达到50+以上业务的请绕道

TodoList

• 修复部分正则判断问题和容器大小的1px误差问题
• 整合自动对齐功能
• 整合并重构旋转功能
  • 实现旋转，旋转时可拉伸大小，且对顶点不动
  • 旋转式手柄样式跟随角度变化
• 修复纵横比
  • 允许外部传入纵横比
• 修复放缩
• 重构代码

提示:开启旋转后 网格对齐和父容器限制将失效，待重构代码，会有Break Change！！！

LiveDemo

中文在线演示地址

Features

默认情况下，开启拖拽和调整大小，如要开启旋转功能，请设置:rotatable=true并传入旋转角度比如:r="0"

Started

npm install  @gausszhou/vue-drag-resize-rotate

// 引入全局自定义组件
import VueDragResizeRotate from "@gausszhou/vue-drag-resize-rotate"
Vue.component('vue-drag-resize-rotate', VueDragResizeRotate) 

<template>
  <div class="view-box">
    <div id="toolbar">
      <input type="checkbox" v-model="rotatable" /> Toggle rotatable
    </div>
    <div class="container">
      <VueDragResizeRotate
        :w="100"
        :h="100"
        :x="0"
        :y="0"
        :parent="true"
        :draggable="true"
        :resizable="true"
        :rotatable="rotatable"
        @resizing="resizing"
        @rotating="rotating"
        :r="angle"
      >
      </VueDragResizeRotate>
    </div>
  </div>
</template>

<script>
import VueDragResizeRotate from "@gausszhou/vue-drag-resize-rotate";
// 当然你也可以在需要的时候在单个组件内引入
export default {
  components: {
    VueDragResizeRotate,
  },
  data() {
    return {
      rotatable: true,
      angle: 0,
    };
  },
  methods: {
    resizing(x, y, w, h) {
      console.log(x, y, w, h);
    },
    rotating(val) {
      this.angle = val;
    },
  },
};
</script>

<style>
#toolbar {
  left: 0;
  top: 0;
  height: 24px;
  padding: 5px;
  border: 1px solid #999;
  border-bottom: none;
  background-color: #CCC;
  z-index: 999;
}

.container {
  width: 100%;
  height: 600px;
  border: 1px solid #000;
  position: relative;
  box-sizing: border-box
}

</style>

CodeReference

# 主要参考
https://github.com/mauricius/vue-draggable-resizable
# 次要参考
https://github.com/gorkys/vue-draggable-resizable-gorkys
https://github.com/tmrcui/vue-draggable-resizable-rotatable