K-vue-dragline NPM

k-vue-dragline

项目根据react-dragline 改写为vue。
支持拖拽辅助线，改变元素大小，元素拖拽功能

原项目：vue-dragline，因为实际运用时候父元素被缩放导致拖动故障，所以自己动手维护了一个

效果图

Installation

npm

npm install k-vue-dragline --save

yarn

yarn add install k-vue-dragline

全局使用

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

Example

<template>
  <draggable-container :scale="scale">
    <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>
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 } },
            ],
            scale:1 // 父元素缩放比，默认为1
        };
    },
    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>

Prop Types:DraggableChild

Property	Type	Default	Description
id	string/number	-	元素唯一值，必填
scale	string/number	1	父元素盒子被缩放适应比例，同vue-draggable-resizablevue-drag
active	Boolean	false	确定组件是否应该处于活动状态。prop 对更改做出反应，也可以与sync修饰符一起使用以保持状态与父级同步。您可以与preventDeactivationprop 一起使用，以便完全控制组件外部的活动行为。
preventDeactivation	Boolean	false	确定当用户在组件外部单击/点击时是否应停用组件。
minWidth	Number	50	定义元素的最小宽度。
maxWidth	Number	null	定义元素的最大宽度。
minHeight	Number	50	定义元素的最小高度。
maxHeight	Number	null	定义元素的最大高度。
parent	Boolean	false	将组件的移动和尺寸限制为父级
axis	String	both	确定可拖动对象可以移动的轴（两者，x，y）
grid	Array	1,1	指定拖动应捕捉到的 x 和 y

event事件

resize 改变元素大小时触发，返回元素的当前坐标x,y和宽高wdth,height
stop 元素停止拖拽时触发，返回元素的当前坐标x,y和宽高wdth,height
drag 元素拖拽时触发，返回元素的当前坐标x,y和宽高wdth,height
start 元素被选中时触发，返回元素的当前坐标x,y和宽高wdth,height

Prop Types: DraggableContainer

Property	Type	Default	Description
Container	String/Element	'div'	The `DraggableContainer` will be rendered as a HTML tag or the React Component you specify
threshold	Number	5	The max distance of between others and the dragging element triggering magnetic adsorption
directions	Array	'tt', 'bb', 'll', 'rr', 'tb', 'lr', 'rl', 'mh', 'mv'	The directions you want. `tt` indicate the guide line will show when a element aligned with the top of the dragging element.
activeClassName	String	'active'	if you want to add class name for the element aligned with one you drag, use it.
lineStyle	Object	{}	You can customize the style of auxiliary line by this option
limit	Boolean	true	Whether to restricts movement within the container
detectOverlap	Boolean	false	If true, then you can't drag block throw other blocks