vue组件拖拽-矩形自由拖拽

    最近公司有个需求，需要实现组件拖拽，实现方式:主要通过vue组件实现，通过在网上查找资料，发现没有真正符合需求的例子，但是有一些功能可以参考，无奈之下打算自己封装一个，一方面也想证明一下自己的能力，此篇博文只是记录一下，方便以后遇到此类问题，有个参考。

  经过一段时间的研究需求发现需要实现组件的自由拖拽，以及放大缩小等功能，需要脚踏实地的一点一点的封装，下面列举一下主要实现的功能点：

1.封装点组件 ，主要实现在容器内自由拖拽；

2.封装正方形组件，和点组件结合使用，通过点组件创建8个坐标点作为可拖拽的对象，根据点坐标的位移实现正方形的放大缩小；

3.使用canvas实现创建各种图形界面；

4.后期维护画板功能，让组件只能在一定区域内移动；

按照上一篇得到的可以自由放大缩小的矩形，下面开始点组件的封装，目的实现矩形的位置自由摆放：

创建html：

<template>

<div class="square" v-customSquare ref="square">

<porint v-customPoint="1" :pointType="1" :isShow="showPoint" @movePoint="movePoint1"></porint>

<porint v-customPoint="2" :pointType="2" :isShow="showPoint" @movePoint="movePoint2"></porint>

<porint v-customPoint="3" :pointType="3" :isShow="showPoint" @movePoint="movePoint3"></porint>

<porint v-customPoint="4" :pointType="4" :isShow="showPoint" @movePoint="movePoint4"></porint>

<porint v-customPoint="5" :pointType="5" :isShow="showPoint" @movePoint="movePoint5"></porint>

<porint v-customPoint="6" :pointType="6" :isShow="showPoint" @movePoint="movePoint6"></porint>

<porint v-customPoint="7" :pointType="7" :isShow="showPoint" @movePoint="movePoint7"></porint>

<porint v-customPoint="8" :pointType="8" :isShow="showPoint" @movePoint="movePoint8"></porint>

<div class="draggable" @mousedown="move"></div>

</div>

</template>

这里的代码和上一篇代码几乎差不多，但是多了一个div,主要就是通过这个div来实现矩形的自由拖拽。请查看css代码：

<style lang="scss">

.draggable{

position: absolute;

width: 100%;

height: 100%;

z-index: 1;

}

</style>

看到这里，大家就应该差不多明白了，实际上这个div 就是覆盖了 组件内容，通过给div 绑定 mousedown事件，不了解的可以看上一篇代码，已经给出详细示例：

move(evt){

let odiv = evt.target;// 获取目标元素

let parentObj = evt.path[1];

let parentPositionWidth = parentObj.style.width.split('p')[0] * 1;

let parentPositionLeft = parentObj.style.left.split('p')[0]* 1;

let parentPositionTop = parentObj.style.top.split('p')[0]*1;

let parentPositionHeight = parentObj.style.height.split('p')[0] * 1;

let x = evt.clientX - odiv.offsetLeft;

let y = evt.clientY - odiv.offsetTop;

document.onmousemove = (e) => {

let left = e.clientX - x;

let top = e.clientY - y;

if(left<= -parentPositionLeft){

left =-parentPositionLeft;

}

if (top <= -parentPositionTop) {

top = -parentPositionTop;

}

if (left >= this.drawingBoardWidth - odiv.offsetWidth - parentPositionLeft){

left =this.drawingBoardWidth - odiv.offsetWidth- parentPositionLeft;

}

if (top >= this.drawingBoardHeight -odiv.offsetHeight - parentPositionTop){

top = this.drawingBoardHeight -odiv.offsetHeight - parentPositionTop;

}

parentObj.style.left = parentPositionLeft + left + 'px';

parentObj.style.top = (parentPositionTop+top)+'px';

}

// 为了防止 火狐浏览器 拖拽阴影问题

document.onmouseup = (e) => {

document.onmousemove = null;

document.onmouseup = null;

}

}

下一篇将更新在画板里动态创建组件。