All Projects → gausszhou → vue-drag-resize-rotate

gausszhou / vue-drag-resize-rotate

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

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects

Projects that are alternatives of or similar to vue-drag-resize-rotate

react-mops
🐶 Modify Orientation Position Size
Stars: ✭ 40 (-4.76%)
Mutual labels:  draggable, resizable, rotatable
TNImageView-Android
Android Library for making scale-able and rotatable image views or giving this power to your own image view. This repo has been depreciated.
Stars: ✭ 18 (-57.14%)
Mutual labels:  draggable, resizable, rotatable
Moveable
Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!
Stars: ✭ 6,378 (+15085.71%)
Mutual labels:  draggable, resizable, rotatable
vue-drr
A Vue2 component for draggable, resizable, rotatable elements
Stars: ✭ 34 (-19.05%)
Mutual labels:  draggable, resizable, rotatable
Vue Draggable Resizable Gorkys
Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线
Stars: ✭ 521 (+1140.48%)
Mutual labels:  draggable, resizable
react-web-editor
The react-web-editor is a WYSIWYG editor library. you can resize and drag your component. It also has simple rich text editor
Stars: ✭ 191 (+354.76%)
Mutual labels:  draggable, resizable
Vue Moveable
↔️ ↕️ 🔄 Vue.js wrapper for Moveable
Stars: ✭ 792 (+1785.71%)
Mutual labels:  draggable, resizable
Vue3 Draggable Resizable
[Vue3 组件] 用于拖拽调整位置和大小的的组件,同时支持冲突检测,元素吸附对齐,实时参考线。
Stars: ✭ 159 (+278.57%)
Mutual labels:  draggable, resizable
jsPanel3
A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
Stars: ✭ 89 (+111.9%)
Mutual labels:  draggable, resizable
Vue Drag Resize
Vue Component for resize and drag elements
Stars: ✭ 1,007 (+2297.62%)
Mutual labels:  draggable, resizable
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (+288.1%)
Mutual labels:  draggable, resizable
Svelte Grid
A responsive, draggable and resizable grid layout, for Svelte.
Stars: ✭ 473 (+1026.19%)
Mutual labels:  draggable, resizable
Qt Nice Frameless Window
Qt Frameless Window for both Windows and OS X, support Aero Snap, drop shadow on Windows, and support Native Style such as round corner, drop shadow on OS X. Based on QMainWindow.
Stars: ✭ 430 (+923.81%)
Mutual labels:  draggable, resizable
React Rnd
🖱 A resizable and draggable component for React.
Stars: ✭ 2,560 (+5995.24%)
Mutual labels:  draggable, resizable
Angular2 Draggable
Angular directive (for version >= 2.x ) that makes the DOM element draggable and resizable
Stars: ✭ 270 (+542.86%)
Mutual labels:  draggable, resizable
Vue Responsive Dash
Responsive, Draggable & Resizable Dashboard (Grid) for Vue
Stars: ✭ 128 (+204.76%)
Mutual labels:  draggable, resizable
vue-smart-widget
🗃️Smart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.
Stars: ✭ 110 (+161.9%)
Mutual labels:  draggable, resizable
Magnify
🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: ✭ 177 (+321.43%)
Mutual labels:  draggable, resizable
Photoviewer
🌀 A JS plugin to view images just like in Windows.
Stars: ✭ 203 (+383.33%)
Mutual labels:  draggable, resizable
Vue Draggable Resizable
Vue2 Component for draggable and resizable elements.
Stars: ✭ 2,431 (+5688.1%)
Mutual labels:  draggable, resizable

vue-drag-resize-rotate

Software License Npm Package

Tips

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

Todo List

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

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

Live Demo

中文在线演示地址

Features

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

Quick Start

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="container">
    <vue-drag-resize-rotate
      :w="100"
      :h="100"
      :x="0"
      :y="0"
      :parent="true"
      :draggable="true"
      :resizable="true"
      :rotatable="true"
      @resizing="resizing"
      @rotating="rotating"
      :r="0"
    >
    {{angle}}
    </vue-drag-resize-rotate>
  </div>
</template>

<script>
// 当然你也可以在需要的时候在单个组件内引入
import VueDragResizeRotate from "@gausszhou/vue-drag-resize-rotate";

export default {
  components: {
    VueDragResizeRotate,
  },
  data() {
    return {
      angle: 0,
    };
  },
  methods: {
    resizing(x, y, w, h) {
      console.log(x, y, w, h);
    },
    rotating(angle) {
      console.log(angle)
    },
  },
};
</script>

Code Reference

https://github.com/mauricius/vue-draggable-resizable
https://github.com/gorkys/vue-draggable-resizable-gorkys
https://github.com/tmrcui/vue-draggable-resizable-rotatable   
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].