技术标签: 前端实现拖拽方式 vuejs 拖拽实现 vue鼠标按下拖拽 h5页面拖拽 vue组件拖拽 vue H5页面编写
最近公司有个需求,需要实现组件拖拽,实现方式:主要通过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;
}
}
下一篇将更新在画板里动态创建组件。
文章浏览阅读304次。此博客主要记录在学习黑马程序员2023版JavaWeb开发课程的一些笔记,方便总结以及复习。_后端异步前端怎么处理
文章浏览阅读1w次。文章目录数值类型整型(int)long(长整型)浮点数复数不同进制表示数值类型转换数据类型信息获取math 模块、cmath 模块python数学函数abs(x)ceil()cmp()exp()fabs()floor()log()log10()max()min()modf()pow()round()sqrt()python随机数函数choice()randrange()random()seed()..._python[80., 20., 1000, 200]
文章浏览阅读876次,点赞23次,收藏21次。halcon 轮廓线处理 关键算子_halcon中的轮廓线 导数
文章浏览阅读544次。HMI产品是L4车辆的人机交互程序,为高速运营、港口单车、测试路测等提供状态可视化、任务交互、自动驾驶行车控制、编队控制功能。_自动驾驶hmi用什么开发
文章浏览阅读4w次,点赞13次,收藏120次。Matlab根据坐标点进行绘制散点图并拟合成图像可以使用cftool函数,下面以二维数据拟合进行举例:(1)首先输入数据点x=[0.20,2,4.01,5.99,8.08,9.98,11.96,14.00,15.99,18.00,19.98,21.98,23.99,25.97,28.01,30.00,32.04,33.99,35.98,37.99,39.99,42.00,43.99,45...._matlab散点图拟合函数
文章浏览阅读6.8k次。javac 用法:javac 其中,可能的选项包括: -g 生成所有调试信息 -g:none 不生成任何调试信息 -g:{lines,vars,source} _命令行运行java参数
文章浏览阅读419次。用户在使用 MySQL 实例时,会遇到空间使用告警甚至超过实例限额被锁定的情况。在 RDS 控制台的实例基本信息中,即会出现如下信息:本文将介绍造成空间使用率过高的常见原因及其相应的解决方法。对于MySQL 5.6版本的实例,升级实例规格和存储空间后即可解锁实例,关于如何升级实例配置,请参见变更配置。•常见原因造成 MySQL 实例空间使用率过高,主要有如下四种原因:Binlog 文件占用高。数据..._阿里云m2实例数超过限制99999
文章浏览阅读1.1w次,点赞5次,收藏13次。1.下载https://github.com/kamranahmedse/jquery-toast-plugin在线预览地址2.导入在页面中引入jquery.toast.css文件,jquery和jquery.toast.js文件。<link type="text/css" rel="stylesheet" href="css/jquery.toast.css">..._jquery.toast.js
文章浏览阅读271次。vue2+vue3
文章浏览阅读940次,点赞12次,收藏19次。本文介绍了四款远程控制电脑的软件,这四款远程控制电脑软件操作方法都很简单,大家可以根据自己的需要选择合适的软件即可。在另一台电脑的Chrome浏览器中登录同一个谷歌账号,打开谷歌远程桌面选择要控制的电脑,再输入PIN码即可远程控制电脑。是一款好用的电脑远程控制软件,用户可以通过网络远程连接到其他计算机,轻松实现远程监控、远程技术支持。在两台电脑上都登录QQ账号,主控端电脑打开要控制的好友聊天窗口,单击右上角的更多按钮。,在管理者的电脑上安装管理端,在员工的电脑上安装员工端,安装好后会自动进行连接和上线。_安企神控制软件
文章浏览阅读1w次,点赞10次,收藏7次。整理 | 郑丽媛出品 | CSDN(ID:CSDNnews)两年前,英特尔在公布新一代 Thunderbolt 4(以下简称雷电 4)接口标准时曾说:“不是所有 USB4 都能和雷电 4 平起平坐。”如今看来,这句话的顺序可能要颠倒一下了:本月初,USB 推广组官宣了 USB4 v2.0,其可通过 USB Type-C 提供高达 80 Gbps(相当于 10GB/s)的数据传输速率——不仅是 U..._usb4+2.0
文章浏览阅读123次。jdk8中文文档jdk17在线文档jdk21在线文档