一次完整的拖拽项目总结之（三）移动与定位

最新推荐文章于 2023-03-03 17:23:18 发布
最新推荐文章于 2023-03-03 17:23:18 发布
阅读量770 收藏 1
点赞数
分类专栏： vue 文章标签： vue 前端 拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juliotang/article/details/103007916
版权

上文描述了拖拽标签的场景，本文详述标签移动过程中的定位，以及拖拽前后落位区域的情况。
在鼠标点击->拖动->抬起的过程中，在不同时机均调用了isLocatedToWhere方法，该方法会返回目前被拖拽标签的位置。其基本原理是通过fallInDiv方法由外向内查找各个div容器，判断当前被移动元素的坐标中心点是否落入当前容器内。isLocatedToWhere最终返回一个代表位置的结构如{firestLevel: 1, secondLevel: 1, [thirdLevel: 2]}，索引从1开始，
根据不同场景决定需要前两层位置或者也需要第三层位置
下图演示了isLocatedToWhere方法判断位置的逻辑。红框代表的是第一层级，如图’广州’处于第一个逻辑块内，firstLevel: 1；黄框代表第二个层级，'广州’依然处于第一个逻辑块内，secondLevel: 1；蓝框代表第三个层级，'广州’是第二个逻辑块，thirdLevel: 2
在这里插入图片描述

1. 移动过程中，触发相应区域高亮

mousemove过程中，调用isLoatedToWhere方法检测目前经过的区域，当拖拽的元素经过时，高亮对应区域，通过改变border样式高亮，此场景只需要firstLevel和secondLe

最低0.47元/天 解锁文章
juliotang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
H5学习之3 拖拽元素 放置元素
qq_29469941的博客
07-23 585
html> lang="en"> charset="UTF-8"> type="text/css"> #div1 { width: 488px; height: 100px; padding: 10px; border: 5px black solid;
HTML5拖放、地理定位
m0_46549742的博客
07-16 231
一、HTML5拖放（Drag和Drop） 1、什么是拖放？ 拖放是一种常见的特性，即抓取对象之后拖到另一位置。在HTML5中，拖放是标准的一部分，任何元素都可以拖放。 2、设置元素为可拖放 设置元素draggable属性为true： <image draggable="true"> ...
html5 drag移动位置,HTML5拖拽功能drag
weixin_36299790的博客
06-04 747
1.创建拖拽对象给需要拖拽的元素设置draggable属性，它有三个值：true：元素可以被拖拽；false：元素不能被拖拽；auto： 浏览器自己判断元素是否能被拖拽。2.处理拖拽事件当我们拖拽对象的时候会触发拖拽事件包括：A.dragstart：当元素拖拽开始触发；B.drag：在元素拖拽过程中触发；C.dragend：元素拖拽结束时触发3.创建投放区①当拖拽对象进入投放区的时候会触发相关的事...
js拖拽位移
shikaixina的博客
12-08 658
<Button class="saveBtn" type="success" @click="saveTab()">发布</Button> <div class="topModelling"> <div class="camera"> <span class="cameraBox cameraLeft"></span> <span class="cameraBox c...
拖拽接口的使用
weixin_33708432的博客
12-13 76
<style> *{ margin: 0; padding: 0; } .div1{ width: 200px; height: 200px; border: 1px solid red; position: re...
JavaScript与Div对层定位和移动获得坐标的实现代码
01-21
1:移动图层 获得点的x轴y轴坐标，从而进行绝对定位(注意：竖拉框会影响 x 轴 y 轴坐标值) 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于...
原生js实现拖拽移动与缩放效果
10-14
主要为大家详细介绍了原生js实现拖拽移动与缩放效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Jquery UI实现一次拖拽多个选中的元素操作
10-21
主要介绍了Jquery UI实现一次拖拽多个选中的元素操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
完整版模拟鼠标移动.rar
04-02
完整版模拟鼠标移动.rar 完整版模拟鼠标移动.rar 完整版模拟鼠标移动.rar 完整版模拟鼠标移动.rar 完整版模拟鼠标移动.rar 完整版模拟鼠标移动.rar
电力拖动与PLC(第2版)-施俊杰教案-项目三4.docx
12-18
电力拖动与PLC(第2版)-施俊杰教案-项目三4.docx
absolute和relative定位简单示例&div在屏幕拖动
有一种信仰叫海阔天空
03-12 538
<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content...
拖拽插件Sortable.js获取拖拽前后，被拖拽元素所在的位置序位
热门推荐
c0411034的博客
08-05 1万+
1.介绍 Sortable.js是一款轻量级的拖放排序列表的js插件，虽然体积小，但是功能很强大，不过拖拽的动画效果并不是很理想 下载地址：https://github.com/RubaXa/Sortable 官方DEMO：http://rubaxa.github.io/Sortable/ 中文详细介绍：https://segmentfault.com/a/1190000008209715...
拖拽按钮 + 获取定位（源码）
weixin_55846296的博客
06-24 171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>信息系统</title> <script src="https://cdn.staticfile.org/v
移动端（五）盒子拖拽
libufan的博客
07-13 295
拖拽的核心： 元素最终位置 =元素初始位置 + 鼠标距离差 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- 元素初始位置 + 鼠标距离差 = 元素最终位置 --> <...
vue + gojs 实现拖拽流程图（实战项目）
qq_279364752的博客
03-03 7521
在项目开发一期的时候我用的不是go.js,而用的是一款轻便的流程插件jsplumb.js,它也集成了各种功能性API，但是在开发二期的时候它的内部功能已经满足不了需求了，所以我就开始在网上查找流程插件，看了很多插件，比如：G6，D3 等这些可视化流程插件都是不能满足需求。一、首先，看到效果图里的内置多点和其他模块单点连线问题，其他插件是无法这个满足需求的，可能我没有深入去了解其他的流程插件吧，但是go.js里内置点连线可以让开发者很快的理解代码逻辑，不用耗费大量的时间去想点与点的连线。
h5页面拖拽选择数字到指定位置_html随意拖动内容位置的两种实现方式
weixin_39569753的博客
12-19 996
测试：chrome v80.0.3987.122 正常两种方式为：拖拽普通标签位置或拖拽canvas中的文本框位置1. 实现鼠标拖动标签元素到任意位置css 代码#range {position: relative;width: 600px;height: 400px;margin: 10px;background-color: rgb(133, 246, 250);}.icon {positio...
QTreeWidget拖拽项目
weixin_43956958的博客
08-22 1564
拖放操作
一次完整的拖拽项目总结之（一）整体项目
juliotang的博客
11-09 386
在https://blog.csdn.net/juliotang/article/details/89386319这篇文章中描述了拖拽所基于的基础实现，最近在实际项目中实现了一个较复杂的拖拽功能，在此予以总结。项目基于vue+iview控件库，整体效果如下： 整体功能上部是一个三级的标签结构，二级（蓝色）和三级（绿色）标签部分可拖拽，拖拽至下部面板；拖拽的标签可以实现在上部原始区域拖走后消失并且...
拖拽（获得位置可保存）
幸福有多远
03-26 2135
&lt;html&gt; &lt;head runat="server"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Index&lt;/title&gt; &lt;script type="
QT笔记之自定义窗口拖拽移动
最新发布
05-31
好的，我可以为您讲解如何在QT中实现自定义窗口的拖拽移动。 首先，我们需要重写QWidget的mousePressEvent和mouseMoveEvent两个事件函数。 在mousePressEvent中，我们需要记录下鼠标按下时的坐标和窗口左上角的坐标，以便计算窗口移动的偏移量。 在mouseMoveEvent中，我们需要计算鼠标移动的偏移量，并将窗口的位置进行相应的调整。 以下是示例代码： ```cpp void MyWindow::mousePressEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { m_dragPosition = event->globalPos() - frameGeometry().topLeft(); } } void MyWindow::mouseMoveEvent(QMouseEvent *event) { if (event->buttons() & Qt::LeftButton) { QPoint newPos = event->globalPos() - m_dragPosition; move(newPos); } } ``` 在上面的代码中，m_dragPosition是一个QPoint类型的成员变量，用于记录鼠标按下时的坐标和窗口左上角的坐标的差值。 最后，我们需要在窗口的构造函数中设置窗口的样式为Qt::FramelessWindowHint，以去掉窗口的边框和标题栏。 完整的示例代码如下： ```cpp #include "mywindow.h" #include <QMouseEvent> MyWindow::MyWindow(QWidget *parent) : QWidget(parent) { setFixedSize(400, 300); setWindowFlags(Qt::FramelessWindowHint); } void MyWindow::mousePressEvent(QMouseEvent *event) { if (event->button() == Qt::LeftButton) { m_dragPosition = event->globalPos() - frameGeometry().topLeft(); } } void MyWindow::mouseMoveEvent(QMouseEvent *event) { if (event->buttons() & Qt::LeftButton) { QPoint newPos = event->globalPos() - m_dragPosition; move(newPos); } } ``` 希望这个简单的示例对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值