当前位置： 首页 > news >正文

按下鼠标进行拖拽，让元素跟随鼠标进行移动，鼠标抬起，元素停止移；js鼠标拖拽 （鼠标按下事件：onmousedown、鼠标移动事件：onmousemove、鼠标抬起事件：onmouseup）

news 2025/11/9 5:33:27

需求如下：

按下鼠标进行拖拽，让元素跟随鼠标进行移动，鼠标抬起，元素停止移动。

解析：

鼠标按下事件：onmousedown

鼠标移动事件：onmousemove

鼠标抬起事件：onmouseup

<!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>#chatFrame{width: 300px;height: 300px;position: absolute;}</style>
</head>
<body><div id="chatFrame" style="width: 300px;height: 300px;background-color: yellowgreen;"></div><script>var div = document.getElementById("chatFrame");var isDragging = false; // 用于标识是否正在拖拽// 鼠标按下事件div.onmousedown = function(event) {isDragging = false; // 每次鼠标按下时重置拖拽标识if (div.setCapture !== undefined) {div.setCapture();}var disX = event.clientX - div.offsetLeft;var disY = event.clientY - div.offsetTop;// 鼠标移动事件document.onmousemove = function(event) {isDragging = true; // 如果发生了移动，认为发生了拖拽var x = event.clientX - disX;var y = event.clientY - disY;div.style.left = x + 'px';div.style.top = y + 'px';};// 鼠标抬起事件document.onmouseup = function() {if (div.releaseCapture !== undefined) {div.releaseCapture();}document.onmousemove = null;// 如果没有发生拖拽，则执行点击事件的默认行为if (!isDragging) {handleIm();}};return false; // 阻止默认行为};// 鼠标点击事件处理函数function handleIm() {console.log("Handle click event");// 在这里添加你希望执行的点击事件的逻辑}</script>
</body>
</html>

相关文章：

按下鼠标进行拖拽，让元素跟随鼠标进行移动，鼠标抬起，元素停止移；js鼠标拖拽 （鼠标按下事件：onmousedown、鼠标移动事件：onmousemove、鼠标抬起事件：onmouseup）

需求如下&#xff1a; 按下鼠标进行拖拽&#xff0c;让元素跟随鼠标进行移动&#xff0c;鼠标抬起&#xff0c;元素停止移动。 解析&#xff1a; 鼠标按下事件&#xff1a;onmousedown 鼠标移动事件&#xff1a;onmousemove 鼠标抬起事件&#xff1a;onmouseup <!DOCT…...

编程日记 2024/5/13 16:04:35

第十二章 项目采购管理

12.1 规划采购管理 12.2 实施采购 12.3 控制采购 项目经理通常没有签订合同的权限&#xff0c;但必须熟悉正规的采购流程&#xff1b; 协议是采购的核心文件&#xff0c;关于协议我们要知道&#xff1a; 协议包括&#xff1a;合同、服务水平协议、谅解、协议备忘录或采购订单 ❗…...

编程日记 2024/5/13 16:03:34

PSFR-GAN复现

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言快速开始安装依赖权重下载及复原 训练网络数据集训练脚本 代码详解训练BaseOptio…...

编程日记 2024/5/13 15:59:29

函数和数组

一、函数 1.函数使用方法 定义函数再引用函数 2.基本函数格式 基本格式1&#xff1a; function 函数名{ ​ 命令序列 } 基本格式2&#xff1a; 函数名&#xff08;&#xff09;{ 命令序列 } 基本格式3&#xff1a; function func_name &#xff08;&#xff09; {…...

编程日记 2024/5/13 15:58:26

docker安装时报错：Error: Nothing to do

安装docker时报以下错误 解决方法&#xff1a; 1.下载关于docker的相关依赖环境 yum -y install yum-utils device-mapper-persistent-data lvm22.设置下载Docker的镜像源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo3…...

编程日记 2024/5/13 15:56:23

白盒测试：覆盖测试及测试用例设计

白盒测试&#xff1a;覆盖测试及测试用例设计 一、实验目的 1、掌握白盒测试的概念。 2、掌握逻辑覆盖法。 二、实验任务 某工资计算程序功能如下&#xff1a;若雇员月工作小时超过40小时&#xff0c;则超过部分按原小时工资的1.5倍的加班工资来计算。若雇员月工作小时超过…...

编程日记 2024/5/13 15:55:22

Java高级开发2024高频面试提问题目

1、请先简单自我介绍一下自己&#xff1f;&#xff08;一般不超过5min&#xff09; 2、你最熟悉的项目是哪一个&#xff0c;讲一下用了哪些技术栈&#xff1f;&#xff08;尽量讲出系统架构图使用到的技术组件和为什么选型这个组件&#xff1f;&#xff09; 3、你项目中使用什…...

编程日记 2024/5/13 15:54:20

Kamailio openssl 3.0.x 需要注意的事项

我们留意到 Debian Bookworm 安装的 openssl 版本是 3.0.x 这里有几个地方要注意&#xff1a; modparam("tls", "init_mode", 1)核心参数 tls_threads_mode 配置为 1 或者 配置为 2&#xff0c;默认为 0版本建议用 5.8.1&#xff0c;貌似 5.7.x 也行 参…...

编程日记 2024/5/13 15:52:18

SpringAMQP Work Queue 工作队列

消息模型: 代码模拟: 相较于之前的基础队列&#xff0c;该队列新增了消费者 不再是一个&#xff0c;所以我们通过代码模拟出两个consumer消费者。在原来的消费者类里写两个方法 其中消费者1效率高 消费者2效率低 RabbitListener(queues "simple.queue")public voi…...

编程日记 2024/5/13 15:51:16

一分钟带你了解什么是等保测评

等保测评&#xff0c;即网络安全等级保护测评&#xff0c;是依据国家信息安全等级保护制度规定&#xff0c;对信息系统进行安全技术测评和安全管理测评&#xff0c;以确定系统的安全保护水平是否达到预定的安全等级要求。以下是等保测评的相关知识点总结&#xff1a; 测评概述&…...

编程日记 2024/5/13 15:49:13

宝塔面板怎么解决nginx跨域问题

1.找到宝塔的nginx配置文件 宝塔有一点不同&#xff0c;nginx配置文件不在nginx的安装目录中&#xff0c;应当去/www/server/panel/vhost/nginx找到 2.添加你要跨域的地址 location /api {proxy_pass http://localhost:8080;proxy_set_header Host $host;proxy_set_header X-…...

编程日记 2024/5/13 15:47:11

Python 自动化脚本系列：第1集

昨天写了一篇介绍如何使用Python实现自动化任务的&#xff0c;文章末尾介绍了一个简单的自动化脚本&#xff0c;因此今天编号从2开始。顺便附上昨天的文章链接&#xff1a; Python 自动化脚本系列&#xff1a;介绍 欢迎关注博主&#xff0c;持续输出更多Python相关内容&#…...

编程日记 2024/5/13 15:45:08

基于PHP开发的图片高清无损在线压缩源码系统 带完整源代码以及搭建教程

系统概述 高清无损在线压缩源码系统基于PHP语言开发&#xff0c;结合GD库和ImageMagick等图像处理工具&#xff0c;实现了对JPEG、PNG、GIF等多种图片格式的高清无损压缩。系统采用B/S架构&#xff0c;用户只需通过浏览器访问系统界面&#xff0c;即可实现图片的上传、压缩、预…...

编程日记 2024/5/13 15:44:06

Linux提权--SUDO(CVE-2021-3156)Polkit(CVE-2021-4034）

免责声明:本文仅做技术学习与交流... 目录 SUDO(CVE-2021-3156) 影响版本 -判断&#xff1a; -利用&#xff1a; Polkit(CVE-2021-4034&#xff09; ​ -判断&#xff1a; -利用: 添加用户 SUDO(CVE-2021-3156) another: SUDO权限配置不当. 影响版本 由系统的内核和发…...

编程日记 2024/5/13 15:42:03

nodejs里面的 http 模块介绍和使用

Node.js的HTTP模块是一个核心模块&#xff0c;它提供了很多功能来创建HTTP服务器和发送HTTP请求。 http.Server是一个基于事件的http服务器&#xff0c;内部是由c实现的&#xff0c;接口是由JavaScript封装。 http.request是一个http客户端工具。 用户向服务器发送数据。 创…...

编程日记 2024/5/13 15:41:02

MVC框架简易实现【精细】

目录 mvc 的架构 MVC 框架 传统web开发的弊端 1.创建一个maven项目 2.添加maven依赖 3.创建TomCatService类 3.1 创建TomcatService类 3.2 TomcatService类讲解 3.3 安装项目到本地仓库&#xff0c;给其他项目使用 4.测试启动Tomcat 4.1 创建一个新的maven项目 4.2 引用…...

编程日记 2024/5/13 15:35:56

Java入门基础学习笔记18——赋值运算符

赋值运算符&#xff1a; 就是“”&#xff0c;就是给变量赋值的&#xff0c;从右边往左边看。 int a 10; // 把数据赋值给左边的变量a存储。 扩展赋值运算符&#xff1a; 注意&#xff1a;扩展的赋值运算符隐含了强制类型转换。 package cn.ensource.operator;public class…...

编程日记 2024/5/13 15:34:55

csv 可视化 python代码

excel查看csv后，csv就被锁定了，不能修改，用pyqt写一个csv查看工具，拖拽查看，非常方便 目录 第2版，提升加载速度 选中单元格统计个数，求和，平均值...

编程日记 2024/5/13 15:32:53

HashMap 和 Hashtable区别的底层原理

一、容器键值对&#xff1a; 1.HashMap 的 key 和 value 都允许为 null &#xff0c; HashMap 在 key 为 null 的时候&#xff0c;值必须为null。 2.Hashtable 的 key 和 value 都不允许为 null 。 Hashtable 遇到key或value为 null时 &#xff0c;将抛出 NullPointerException…...

编程日记 2024/5/13 15:27:46

代码随想录35期Day32-Java

Day32题目 LeetCode122.买股票的最佳时机 核心思想&#xff1a;很简单&#xff0c;只要第二天比第一天贵&#xff0c;就第一天买入&#xff0c;第二天卖出 class Solution {public int maxProfit(int[] prices) {// 只要后一天比这一天价钱高就买&#xff0c;然后第二天卖出…...

编程日记 2024/5/13 15:26:45

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/7 13:08:40

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2025/11/8 1:22:44

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/11/8 2:07:31

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/9/11 12:54:42

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/10/30 3:23:02

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/8/16 15:34:02

Go 语言并发编程基础：无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

编程新知 2025/9/13 17:45:05

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...

编程新知 2025/9/22 1:53:57