鼠标拖拽盒子移动

目录

  • 需求
  • 思路
  • 代码
  • 页面展示
  • 【补充】纯js实现

需求

浮动的盒子添加鼠标拖拽功能

思路

  1. 给需要拖动的盒子添加鼠标按下事件
  2. 鼠标按下后获取鼠标点击位置与盒子边缘的距离
  3. 给 document 添加鼠标移动事件
  4. 鼠标移动过程中,将盒子的位置进行重新定位
  5. 侦听 document 鼠标弹起,移除鼠标移动事件

代码

<!-- 鼠标拖拽盒子 -->
<template><div><!-- 【1】给需要拖动的盒子添加鼠标按下事件 --><div ref="btns" class="btns" @mousedown="mousedownHandler">试试拖动我</div></div>
</template><script>
export default {name: 'Drag',components: {},data() {return {mouseToBoxRangeX: 0, // 鼠标点击位置与盒子边缘的距离mouseToBoxRangeY: 0 // 鼠标点击位置与盒子边缘的距离}},computed: {},watch: {},mounted() {// 【5】侦听 document 鼠标弹起,移除鼠标移动事件document.addEventListener('mouseup', () => {document.removeEventListener('mousemove', this.mousemoveHandler)})},methods: {mousedownHandler($event) {// 【2】鼠标按下后获取鼠标点击位置与盒子边缘的距离//  鼠标点击位置与盒子边缘的距离 = 鼠标点击位置 - 盒子当前位置this.mouseToBoxRangeX = $event.pageX - this.$refs.btns.offsetLeftthis.mouseToBoxRangeY = $event.pageY - this.$refs.btns.offsetTop// 【3】给 document 添加鼠标移动事件document.addEventListener('mousemove', this.mousemoveHandler)},mousemoveHandler($event) {// 【4】鼠标移动过程中,将盒子的位置进行重新定位// 盒子当前位置 = 鼠标点击位置 - 鼠标点击位置与盒子边缘的距离 - 盒子自身设定的边距(此处没有)// 【注意】设置盒子最新位置时需加上单位 'px'this.$refs.btns.style.left = $event.pageX - this.mouseToBoxRangeX + 'px'this.$refs.btns.style.top = $event.pageY - this.mouseToBoxRangeY + 'px'}}
}
</script><style lang='scss' scoped>
.btns {width: 70px;height: 147px;position: absolute;bottom: 10px;right: 10px;z-index: 2000;cursor: move;background-color: red;
}
</style>

页面展示

在这里插入图片描述

【补充】纯js实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.box {position: relative;width: 100px;height: 100px;background-color: tomato;margin: 100px;}</style></head><body><div class="box"></div><script>/* 效果:鼠标拖着盒子移动拖着:鼠标左键按着不松手(mousedown),然后鼠标移动(mousemove)注意:鼠标左键按下,才注册上了鼠标移动事件*/var box = document.querySelector('.box')// 添加鼠标点击事件box.addEventListener('mousedown', function (e) {console.log('this----', this)console.log('this.offsetLeft----', this.offsetLeft)console.log('this.offsetTop----', this.offsetTop)// 【1】获取鼠标在盒子里的位置// 鼠标的坐标 - 盒子的坐标var x = e.pageX - this.offsetLeftvar y = e.pageY - this.offsetTopconsole.log(x, y)// 注册鼠标移动事件(给整个document添加 事件)document.addEventListener('mousemove', move)function move(e) {// 【2】设置盒子的位置(注意 给盒子添加定位)// 鼠标的坐标 - 鼠标在盒子里的坐标// 【2.1】盒子没有外边距// box.style.left = (e.pageX - x) + 'px';// box.style.top = (e.pageY - y) + 'px';// 【2.2】盒子有外边距box.style.left = e.pageX - x - 100 + 'px'box.style.top = e.pageY - y - 100 + 'px'}// 【3】鼠标弹起,删除移动事件document.addEventListener('mouseup', function () {// 删除鼠标移动事件document.removeEventListener('mousemove', move)})})</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51419.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iOS开发Swift-集合类型

集合基本类型&#xff1a;数组 Array (有序)&#xff0c; 集合 Set (无序不重复)&#xff0c; 字典 Dictionary (无序键值对) 1.数组 Arrays (1)数组的表示 Array<Element> [Element](2)创建空数组 var someInts: [Int] [] someInts.count //数组长度(3)带值数组 var…

Grounded Language-Image Pre-training论文笔记

Title&#xff1a;Grounded Language-Image Pre-training Code 文章目录 1. 背景2. 方法&#xff08;1&#xff09;Unified Formulation传统目标检测grounding目标检测 &#xff08;2&#xff09;Language-Aware Deep Fusion&#xff08;3&#xff09;Pre-training with Scala…

【linux】基本指令(二)【man、echo、cat、cp】

目录 一、man指令二、echo指令三、cat指令二、cp指令一些常见快捷键 一、man指令 Linux的命令有很多参数&#xff0c;我们不可能全记住&#xff0c;可以通过查看联机手册获取帮助。访问Linux手册页的命令是 man 语法: man [选项] 命令 常用选项 1.-k 根据关键字搜索联机帮助 2…

基于 SVG 的图形交互方案实践

不知道从什么时候起&#xff0c;人们开始喜欢上数字大屏这种“花里胡哨”的东西&#xff0c;仿佛只要用上“科技蓝”这样神奇的色调&#xff0c;就可以让一家公司焕然一新&#xff0c;瞬间变得科技感满满。不管数字大屏的实际意义&#xff0c;是用来帮助企业监控和决策&#xf…

Linux网络编程:线程池并发服务器 _UDP客户端和服务器_本地和网络套接字

文章目录&#xff1a; 一&#xff1a;线程池模块分析 threadpool.c 二&#xff1a;UDP通信 1.TCP通信和UDP通信各自的优缺点 2.UDP实现的C/S模型 server.c client.c 三&#xff1a;套接字 1.本地套接字 2.本地套 和 网络套对比 server.c client.c 一&#xff1a;线…

electron软件安装时,默认选择为全部用户安装

后续可能会用electron开发一些工具&#xff0c;包括不限于快速生成个人小程序、开发辅助学习的交互式软件、帮助运维同学一键部署的简易版CICD工具等等。 开发进度&#xff0c;取决于我懒惰的程度。 不过不嫌弃的同学还是可以先关注一波小程序&#xff0c;真的发布工具了&…

每日一学——防火墙

防火墙是网络安全的重要组成部分&#xff0c;可以帮助保护网络免受恶意攻击和未经授权的访问。以下是防火墙的基本配置步骤&#xff1a; 定义安全策略&#xff1a;防火墙通过安全策略来决定允许或拒绝网络流量。你需要定义适当的安全策略来保护你的网络。安全策略通常包括源IP地…

微软宣布在 Excel 中使用 Python:结合了 Python 的强大功能和 Excel 的灵活性。

自诞生以来&#xff0c;Microsoft Excel 改变了人们组织、分析和可视化数据的方式&#xff0c;为每天使用它的数百万人提供了决策基础。今天&#xff0c;我们宣布发布 Excel 中的 Python 公共预览版&#xff0c;从而使 Excel 中的分析功能取得重大进展。 Excel 中的 Python 可…

基于springboot+vue的考研资讯平台(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

vue-pc端禁止用户选中文字-右键-复制

前言 pc端开发中我们经常会遇见一些页面&#xff0c;会因为刷新&#xff0c;渲染&#xff0c;卡顿出现文字选中效果 或者一些敏感的页面我们不希望用户复制&#xff0c;选中&#xff0c;页面的文字信息&#xff0c;比如考试&#xff0c;敏感信息 其实这些也是可以通过代码控制…

【洛谷】P1873 [COCI2011-2012#5] EKO / 砍树

原题链接&#xff1a;https://www.luogu.com.cn/problem/P1873 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 二分答案。 3. 代码实现 #include<bits/stdc.h> using namespace std; #define ll long long const int N 1e6 10; int a[N], …

系统学习Linux-LVS集群

集群概述 负载均衡技术类型 四层负载均衡器 也称为 4 层交换机&#xff0c;主要通过分析 IP 层及 TCP/UDP 层的流量实现基于 IP 加端口的负载均衡&#xff0c;如常见的 LVS、F5 等&#xff1b; 七层负载均衡器 也称为 7 层交换机&#xff0c;位于 OSI 的最高层&#xff0c;即…

前端面试:【系统设计与架构】组件化、模块化、微前端的现代前端架构演进

前端架构和设计一直在不断演进&#xff0c;以满足不断变化的需求和应对日益复杂的前端应用程序。在本文中&#xff0c;我们将探讨三个重要的现代前端架构概念&#xff1a;组件化、模块化和微前端&#xff0c;以及它们在构建可维护、可扩展的前端应用程序中的作用。 1. 组件化&a…

LeetCode:53. 最大子数组和 - Python

53. 最大子数组和 问题描述&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-…

数据库表结构导出为word、html、markdown【转载,已解决,已验证,开源】

注&#xff1a;本文为gitcode代码验证&#xff0c;转载gitcode gitcode&#xff1a;https://gitcode.net/mirrors/pingfangushi/screw?utm_sourcecsdn_github_accelerator 整理数据库文档&#xff1a;https://mp.weixin.qq.com/s/Bo_U5_cl82hfQ6GmRs2vtA <!--数据库文档核…

LVS+Keepalived群集

目录 1、keepalived概述及其功能 2、keepalived体系主要模块及其作用 3、VRRP通信原理和keepalived工作原理 4、LVSKeepalived 高可用群集实验部署 1、keepalived概述及其功能 故障自动切换failover 实现lvs群集中节点健康检查 节点服务器的高可用性 keepalived软件就…

Seaborn数据可视化(三)

1.绘制直方图 使用displot()绘制直方图。 import seaborn as sns import numpy as np import matplotlib.pyplot as plt# 生成随机数据 np.random.seed(0) data np.random.randn(1000)# 使用displot绘制直方图 sns.displot(data, bins10, kdeTrue)# 展示图形 plt.show() 结…

Python用 tslearn 进行时间序列聚类可视化

全文链接&#xff1a;https://tecdat.cn/?p33484 我们最近在完成一些时间序列聚类任务&#xff0c;偶然发现了 tslearn 库。我很想看看启动和运行 tslearn 已内置的聚类有多简单&#xff0c;结果发现非常简单直接&#xff08;点击文末“阅读原文”获取完整代码数据&#xff09…

Python Web 开发之 JWT 简介

在之前的课程中,介绍过 Flask-Login 框架&#xff0c;它是基于 Session 和 Cookie 技术来实现用户授权和验证的&#xff0c;不过 Session 有很多的局限性&#xff0c;这一节介绍一种基于 token 的验证方式 —— JWT (JSON Web Token)&#xff0c;除了对 JWT 的概念讲解之外&…

Nexus私有仓库+IDEA配置远程推送

目录 一、docker安装nexus本地私服&#xff0c;Idea通过maven配置deploy本地jar包&#xff08;简单&#xff09; 二、docker push镜像到第三方nexus远程私服&#xff08;shell命令操作&#xff09; 三、springboot通过maven插件自动生成docker镜像并push到nexus私服&#xf…