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组件已经封装完毕;如需了解更多请翻阅下一篇博文。

展开阅读全文

没有更多推荐了,返回首页