vue组件拖拽 -创建坐标点

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

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

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

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

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

下面开始点组件的封装：

创建html

 

<template>

<div class="point" @mousedown="move">

</div>

</template>

编写脚本:

</<script>

export default {

name:'point',

data(){

return {

// 向左移动的距离

positionX:0,

// 向上移动的距离

positionY:0,

}

},

//点组件的类型，1 普通的点，主要实现在容器内自由拖拽 ，2其他类型 目前未知

props:['pointType'],

methods:{

//鼠标按下事件，

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;//获取父元素的相对容器的left偏移量

let parentPositionTop = parentObj.style.top.split('p')[0]*1;//获取父元素的相对容器的top偏移量

let parentPositionHeight = parentObj.style.height.split('p')[0] * 1;//获取父元素的高；

let x = evt.clientX - odiv.offsetLeft;//获取鼠标按下时相对左侧的x坐标

let y = evt.clientY - odiv.offsetTop;//获取鼠标按下时相对上边距的y坐标

document.onmousemove = (e) => { //鼠标移动事件

//调用父组件，将参数抛出给父类

this.$emit("movePoint",parentObj,odiv,x,y,e,parentPositionWidth,parentPositionLeft,parentPositionTop,parentPositionHeight);

}

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

document.onmouseup = (e) => {

document.onmousemove = null;

document.onmouseup = null;

}

}

}

}

</script>

//到此，dian组件已经封装完毕；如需了解更多请翻阅下一篇博文。