vue 鼠标在父元素内移动,子元素跟随鼠标移动,且子元素不能超出父元素边框

时间: 2023-11-30 10:02:18 浏览: 130

你可以使用 @mousemove 监听鼠标移动事件,然后通过计算鼠标位置和父元素位置的差值,来设置子元素的位置。

具体实现步骤如下:

  1. 在父元素上添加 @mousemove 监听事件,获取鼠标位置 event.pageXevent.pageY 以及父元素位置 parentNode.offsetLeftparentNode.offsetTop
  2. 计算鼠标位置和父元素位置的差值 deltaXdeltaY
  3. 判断子元素的位置是否超出父元素的边界,如果超出则设置子元素的位置为父元素的边界位置。
  4. 否则,设置子元素的位置为鼠标位置和父元素位置的差值。

代码示例:

<template>
  <div class="parent" @mousemove="handleMouseMove">
    <div class="child" :style="{left: childLeft + 'px', top: childTop + 'px'}"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childLeft: 0,
      childTop: 0
    }
  },
  methods: {
    handleMouseMove(event) {
      const parentNode = event.currentTarget
      const mouseX = event.pageX
      const mouseY = event.pageY
      const parentX = parentNode.offsetLeft
      const parentY = parentNode.offsetTop
      
      const deltaX = mouseX - parentX
      const deltaY = mouseY - parentY
      
      const childWidth = 100 // 子元素宽度
      const childHeight = 100 // 子元素高度
      
      const maxX = parentNode.clientWidth - childWidth // 子元素最大可移动的横向距离
      const maxY = parentNode.clientHeight - childHeight // 子元素最大可移动的纵向距离
      
      let childLeft = deltaX
      let childTop = deltaY
      
      if (childLeft < 0) {
        childLeft = 0
      } else if (childLeft > maxX) {
        childLeft = maxX
      }
      
      if (childTop < 0) {
        childTop = 0
      } else if (childTop > maxY) {
        childTop = maxY
      }
      
      this.childLeft = childLeft
      this.childTop = childTop
    }
  }
}
</script>

<style>
.parent {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
}

.child {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
向AI提问 loading 发送消息图标

相关推荐

大家在看

recommend-type

连续相位调制CPM通信系统的同步分析

连续相位调制CPM通信系统的同步分析,含word文章。 运行注意事项:使用matlab2021a或者更高版本测试,运行时注意matlab左侧的当前文件夹窗口必须是当前工程所在路径。 CPM调制方式通过瞬时的相位信息进行信息传递,其码元在转换过程中,相位是连续的。介绍了CPM信号的频谱特性,并分析了通过泛函数优化后的码元频谱特性。最后对CPM系统的解调原理以及载波同步和相位同步技术进行了研究。
recommend-type

【推荐】智慧工地综合解决方案PPT合集(43份可编辑PPT方案).zip

智慧工地综合解决方案PPT合集,共43份可编辑PPT/PPTX方案 【推荐】“智慧工地”解决方案 【推荐】5G智慧工地解决方案-115页 【推荐】VANTIQ智慧工地整体解决方案 【推荐】建筑工地智能监控解决方案 【推荐】智慧工地方案 【推荐】智慧工地整体方案 【推荐】智慧工地(施工智能化解决系统) 【推荐】智慧工地解决方案 【推荐】智慧工地解决方案及案例 【推荐】智慧工地扬尘噪声在线监测解决方案 工地可视化综合解决方案 湖北联通智慧工地解决方案 互联网+智慧工地大数据一体化管理平台解决方案 建筑工地人脸识别系统应用方案 辽宁联通智慧工地解决方案 人脸识别智能化工地管理应用解决方案 施工现场人员设施安全管理物联网解决方案 建筑工地安全管理数字化监管系统应用方案 实用性智慧工地解决方案 浙江联通数字工地解决方案 智慧工地解决方案 智慧工地人工智能AI解决方案3.0.0 智慧工地物联网平台综合解决方案 智慧工地整体解决方案 中国联通建筑工地视频监控方案 中国联通智慧工地解决方案 中控智慧工地通道管理系统 ZTTB智慧工地解决方案 智慧工地总体方案介绍 智慧工地监控系统
recommend-type

Solar-Wind-Hybrid-Power-plant_matlab_

hybrid solar wind farm using matlab
recommend-type

数据结构课程设计——中文文本字频统计源代码及课程报告

cs数据结构课程设计:包括源代码、测试文件、课程报告
recommend-type

毕业设计:python基于深度学习的交通标志识别系统(源码 + 数据库 + 说明文档)

毕业设计:python基于深度学习的交通标志识别系统(源码 + 数据库 + 说明文档) 2 开发工具及技术 2 2.1 B/S结构的介绍 2 2.2 PYTHON技术的介绍 2 2.3 HTML技术的介绍 2 2.4 MYSQL数据库的介绍 3 2.5 深度算法的介绍 3 2.6 开发环境的介绍 3 3 需求分析 4 3.1 可行性分析 4 3.2 功能需求分析 4 3.3 非功能需求分析 4 4 总体设计 6 4.1 系统总体结构设计 6 4.2 系统的数据库设计 6 5 系统功能实现 6 5.1 登录及注册 6 5.2 首页展示 6 5.3 个人信息 6 5.4 用户管理 6 5.5 修改密码 6 5.6 图片识别 6 5.7 摄像头识别 6 5.8 天气识别 6 6 系统测试 6 6.1 测试目的 6 6.2 测试内容 6 6.3 测试总结 6

最新推荐

recommend-type

基于Vue实现图片在指定区域内移动的思路详解

在本文中,我们将探讨如何使用Vue框架实现图片在指定区域内移动的功能。这个功能通常用于图片预览、全景图浏览或类似的应用场景,其中用户可以自由地在有限的区域内查看图片的不同部分。 首先,我们需要理解实现这...
recommend-type

vue获取当前点击的元素并传值的实例

本文将详细讲解如何在Vue中实现这一功能,并提供一个具体的实例。 首先,我们要了解Vue中的事件处理机制。Vue使用的是事件修饰符(event modifiers)和事件处理器(event handlers)来处理DOM事件。例如,`@click` ...
recommend-type

vue项目里面引用svg文件并给svg里面的元素赋值

在Vue项目中引用SVG文件并给SVG内部元素赋值是一个常见的需求,特别是在处理复杂的SVG图形时。本篇文章将详细介绍如何实现这一目标。 首先,我们需要理解SVG(Scalable Vector Graphics)是一种基于XML的矢量图像...
recommend-type

vue组件中使用iframe元素的示例代码

Vue 组件中使用 iframe 元素的示例代码 本文主要介绍了 Vue 组件中使用 iframe 元素的示例代码,分享给大家,具体如下: iframe 元素的基本使用 在 Vue 组件中使用 iframe 元素可以实现各种功能,如展示超链接、...
recommend-type

vue中如何让子组件修改父组件数据

在子组件中,我们可以拷贝一份父组件传递过来的数据副本,以便在子组件中进行修改。 ``` // 在子组件中 export default { props: { checkModalGroup: { type: Array, default: [], required: false, } }, ...
recommend-type

探索RPI2裸机开发:SpaceGame项目的学习之旅

标题中所提及的知识点: 标题“RPI2--Bare-Metal-SpaceGame-”指向一个与树莓派2(Raspberry Pi 2,简称RPI2)有关的项目,该项目的核心在于“裸机编程”(Bare-Metal)和开发一个简单的太空游戏(SpaceGame)。在这部分,我们可以深入探讨以下几个主要概念: 1. **Raspberry Pi 2 (RPI2)**:RPI2是树莓派基金会推出的一款单板计算机,它具有4个CPU核心,运行速度为900MHz,支持1GB RAM。树莓派2通常用于学习和教育,也常被用于原型设计、小型游戏机、嵌入式系统等多种场景。 2. **裸机编程(Bare-Metal)**:这是一种低级的编程方法,指的是直接对硬件进行编程而不需要任何操作系统。它通常涉及直接访问和控制硬件资源,包括内存管理、I/O操作、中断处理等。 3. **太空游戏开发**:在本项目中,开发一个太空主题的游戏,这通常要求了解基本的游戏编程原理,如图形渲染、用户输入处理、游戏逻辑和物理模拟等。 描述中所提及的知识点: 描述与标题几乎相同,强调了通过该项目学习树莓派2硬件和获得编写类似实际游戏机代码的经验。重点在于学习和实践经验,而不仅仅是开发一个游戏。 1. **项目学习目的**:这里强调了树莓派2作为一个学习平台的价值,它不仅适用于学习编程和硬件,还能帮助学习者理解计算机工作原理。 2. **编程实践**:提到通过实际编写代码来获得编程体验,这需要对编程语言有相当程度的掌握,尤其是C语言,因为C语言提供了对硬件进行底层操作的能力。 3. **实际游戏机编程体验**:这里指的是使用树莓派2模拟传统游戏机的开发环境,这可能包括直接使用键盘、鼠标或连接控制器作为输入设备,以及可能的显示输出设备。 标签中所提及的知识点: 【标签】:"C" 标签指明了在该项目中使用的编程语言是C语言,这是一个关键点,因为裸机编程通常涉及到C语言或汇编语言。 1. **C语言在裸机编程中的应用**:C语言因其高级语言特性结合接近硬件的能力而广受欢迎。在裸机编程中,C语言可以用来直接操作硬件,定义内存映射、硬件寄存器配置等。 2. **C语言与操作系统**:在没有操作系统的环境下,C语言允许程序员控制硬件资源并手动管理内存,这在开发嵌入式系统或特定应用程序时非常有用。 压缩包子文件的文件名称列表中的知识点: 【压缩包子文件的文件名称列表】: RPI2--Bare-Metal-SpaceGame--main 虽然只提供了一个文件名,但我们可以从中推测一些信息: 1. **文件命名惯例**:文件名“RPI2--Bare-Metal-SpaceGame--main”暗示了这是一个主程序文件,"main"通常意味着是程序的入口点。 2. **项目的组织结构**:从文件名可以看出,项目可能被分为不同的文件,每个文件承担不同的功能,而"main"文件通常包含主循环和程序的主要控制逻辑。 3. **代码维护和模块化**:如果文件名中包含模块化信息,比如函数、类或模块的名称,这表明项目可能采用了某种模块化或面向对象的编程风格,即使在裸机编程中,代码组织和结构化也很重要。 综上所述,这个项目提供了丰富学习计算机系统底层工作原理的机会,尤其是硬件操作、C语言编程和裸机游戏开发。对于任何对嵌入式系统和游戏开发感兴趣的人来说,这都是一个宝贵的实践案例。
recommend-type

【三极管测试仪全方位打造攻略】:从设计到实现,提升电子工作室的专业度

# 摘要 本文首先回顾了三极管的基础知识,阐述了对三极管进行测试的必要性。随后详细介绍了三极管测试仪的设计原理,包括其工作原理、电路设计要求以及核心组件的选择与电路布局。在硬件构建方面,本文阐述了元件采购、电路板设计、硬件组装与焊接工艺,以及功能测试与故障排除过程。测试软件开发部分包括需求分析、功能规格书编写、用户界面设计、编程语言选择、核心算法实现、软件集成和系统测试。此外,还探讨了测试仪的校准与优化策略,如标准信号源的使用、系统误差分析、测试速度与准确性提升等。最后,通过实际案例展示了测试仪的应用,包括测试环境的搭建、测试前的准备工作、测试结果的分析及故障诊断。 # 关键字 三极管;测试
recommend-type

matplotlib 网格

### 如何在 Matplotlib 中添加和配置网格 在 Matplotlib 中,`grid()` 方法提供了简单的方式来显示或隐藏网格线。此功能有助于更清晰地读取图表上的数值。 对于基本的网格启用,只需调用 `plt.grid(True)` 或者针对特定的 Axes 对象使用 `.grid(True)` 即可开启默认样式下的网格[^1]。 为了更加精细地控制网格外观,可以通过传递额外的关键字参数给 `grid()` 来实现: - 使用 `which` 参数可以选择应用大刻度('major')、小刻度('minor')或是两者皆有的网格线条。 - 利用布尔类型的 `b` 参数决定是
recommend-type

Winform中socketTCP心跳包检测示例

标题:“socketTCP通信心跳包实例” 在介绍“socketTCP通信心跳包实例”之前,我们首先要明确几个基本概念。TCP(Transmission Control Protocol)是一种面向连接的、可靠的、基于字节流的传输层通信协议。Socket编程是一种网络编程的手段,它允许程序之间通过网络进行数据交换。在Socket编程中,心跳包(Heartbeat Packet)是一种特定的数据包,用于检测网络连接是否存活。 在TCP/IP协议中,连接的双方会保持一定的数据交换,以维持连接状态。但在长时间无数据交换的情况下,TCP连接可能会因为超时而断开,即使网络是通畅的。在这种情况下,心跳包就显得尤为重要,通过定时发送特定的数据包(心跳包)来维持网络连接的稳定性。 在Windows窗体应用程序(WinForm)中,使用Socket进行TCP通信是一种常见的需求。心跳包在这种环境下尤其有用,因为WinForm程序往往需要长时间运行,保持客户端与服务器之间的通信。 以下是使用心跳包在SocketTCP通信中的一些关键知识点: 1. 心跳包的作用: 心跳包主要用于检测网络的稳定性和系统的活跃性。在网络延迟或数据传输量不大的情况下,心跳包可以保证通信双方知道对方仍然在线并且可用。 2. 心跳包的设计: 心跳包通常包含有特定的数据内容,比如特定的字节序列或者一些元数据(例如时间戳)。这些数据可以帮助接收方确认收到的是心跳包而不是正常的业务数据。 3. 发送心跳包的策略: 在Socket通信中,心跳包可以通过定时器(例如.NET中的Timer类)来定时发送。发送频率需要精心设计,过高会加重网络负担,过低则不能及时发现网络问题。 4. 心跳包的接收与处理: 接收方在收到心跳包后,应根据心跳包的内容或特定的协议来判断是否正确接收。如果长时间未收到心跳包,则可能需要采取措施,如发送心跳包请求、断开连接或者尝试重新连接。 5. 异常处理: 在实际的Socket编程中,对于心跳包的异常处理是必不可少的。例如,当接收方没有收到预期的心跳包时,需要有一定的策略来处理这种异常情况,避免错误地关闭一个正常的连接。 6. 示例代码逻辑: 一个简单的心跳包实例可能包括以下几个逻辑步骤: - 创建Socket连接并绑定到本地端口。 - 启动一个定时器来周期性发送心跳包。 - 在定时器的回调函数中发送心跳包数据。 - 在Socket的读取事件中监听并处理心跳包数据。 - 检测心跳包的接收情况,根据心跳包的接收状态执行相应的逻辑。 描述中提到的程序是一个简单的心跳包实例,这个实例的目的在于展示如何在WinForm的Socket通信中实现心跳包机制,使得连接的稳定性和状态检测变得简单易懂。对于开发者来说,通过这样的实例可以更容易理解如何在实际的项目中应用心跳包技术,确保通信的可靠性。 【标签】“socket心跳包”提示我们,这个实例专门针对心跳包在Socket编程中的应用。在实际开发中,心跳包的实现和管理可能会更加复杂,但这个实例将作为构建更复杂系统的起点,提供基础知识和开发经验。 文件名“socket心跳包”表明,提供的资源或者示例代码直接与“心跳包”相关。因此,我们可以期待这个文件将包含有关心跳包发送与接收的实现代码,心跳包的结构定义,以及心跳包机制的测试和调试方法。 总之,心跳包是网络通信中保证连接有效性和及时检测网络问题的一个重要手段。在SocketTCP通信中,通过心跳包的定时发送和接收,可以有效地避免因网络波动而造成的连接断开,提高通信质量。
recommend-type

Layui动态表单不再失效:揭秘元素生成与验证的终极解决方案

# 摘要 Layui动态表单作为前端开发中的一项重要技术,其基础概述、元素生成原理、验证机制、高级应用场景、维护与扩展以及案例研究构成了本文的研究内容。本文详细探讨了Layui元素的构成、创建方法及问题解决策略,深入分析了表单验证的实现与
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部