vue拖拽辅助线+改变元素大小组件

vue-dragline

项目根据react-dragline 改写为vue。
github地址：https://github.com/BadMooncc/vue-dragline
支持拖拽辅助线，改变元素大小，元素拖拽功能

演示

屏幕录制2022-04-12 17.56.37

Installation

npm

npm install vue-dragline --save

yarn

yarn add install vue-dragline

全局引入

在入口文件main.js，

import Vue from 'vue';
import drag from 'vue-dragline';
import 'vue-dragline/lib/vue-dragline.css';
Vue.use(drag);

Example

<template>
  <draggable-container>
    <draggable-child
      v-for="item in initialChildren"
      :key="item.id"
      :id="item.id"
      :width="item.width"
      :height="item.height"
      @stop="handleStop"
      @start="handleStart"
      @drag="handleDrag"
      @resize="handleResize"
      :default-position="item.position">
      <div
        class="item"
        :style="{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          cursor: 'move',
          boxSizing: 'border-box',
          background: item.background,
        }">
        <span>size: {{ item.size }}</span>
        <span>drag me</span>
      </div>
    </draggable-child>
  </draggable-container>
</template>
<script>
import 'vue-dragline/lib/vue-dragline.css';
export default {
    data() {
        return {
            initialChildren: [
                { id: 1, background: '#8ce8df', width: 100, height: 100, position: { x: 100, y: 10 } },
                { id: 2, background: '#8ce8df', width: 100, height: 100, position: { x: 400, y: 106 } },
                { id: 3, background: '#d2aff6', width: 100, height: 100, position: { x: 100, y: 316 } },
                { id: 4, background: '#fee493', width: 100, height: 100, position: { x: 480, y: 376 } },
            ]
        };
    },
    methods: {
        handleResize(e) {
            console.log(e, 'handleResize');
        },
        handleDrag(e) {
            console.log(e);
        },
        handleStop(e) {
            console.log(e, 'handleStop');
        },
        handleStart() {
            console.log('开始');
        },
        handleClick() {
            alert(1);
        }
    }
};
</script>

draggable-child组件 Prop Types

Property	Type	Default	Description
id	string/number	-	元素唯一值，必填
width	number	-	元素宽度
height	number	-	元素高度
default-position	object {x,y}	-	元素元素x，y轴坐标

event事件

resize
改变元素大小时触发，返回元素的当前坐标x,y和宽高wdth,height

stop
元素停止拖拽时触发，返回元素的当前坐标x,y和宽高wdth,height

drag
元素拖拽时触发，返回元素的当前坐标x,y和宽高wdth,height

start
元素被选中时触发，返回元素的当前坐标x,y和宽高wdth,height