web技术学习笔记和分享

Appearance

k-vue-dragline ​

项目根据react-dragline 改写为vue。

支持拖拽辅助线，改变元素大小，元素拖拽功能

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

  • 效果图

Installation ​

npm

npm install k-vue-dragline --save

yarn

yarn add install k-vue-dragline

全局使用

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

Example ​

js
<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 ​

PropertyTypeDefaultDescription
idstring/number-元素唯一值，必填
scalestring/number1父元素盒子被缩放适应比例，同vue-draggable-resizablevue-drag
activeBooleanfalse确定组件是否应该处于活动状态。prop 对更改做出反应，也可以与sync修饰符一起使用以保持状态与父级同步。您可以与preventDeactivationprop 一起使用，以便完全控制组件外部的活动行为。
preventDeactivationBooleanfalse确定当用户在组件外部单击/点击时是否应停用组件。
minWidthNumber50定义元素的最小宽度。
maxWidthNumbernull定义元素的最大宽度。
minHeightNumber50定义元素的最小高度。
maxHeightNumbernull定义元素的最大高度。
parentBooleanfalse将组件的移动和尺寸限制为父级
axisStringboth确定可拖动对象可以移动的轴（两者，x，y）
gridArray[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（react-dragline原版，所以英文） ​

PropertyTypeDefaultDescription
ContainerString/Element'div'The DraggableContainer will be rendered as a HTML tag or the React Component you specify
thresholdNumber5The max distance of between others and the dragging element triggering magnetic adsorption
directionsArray['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.
activeClassNameString'active'if you want to add class name for the element aligned with one you drag, use it.
lineStyleObject{}You can customize the style of auxiliary line by this option
limitBooleantrueWhether to restricts movement within the container
detectOverlapBooleanfalseIf true, then you can't drag block throw other blocks