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

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

news 2026/4/1 2:23:04

需求如下：

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

解析：

鼠标按下事件：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

快速验证openclaw：用快马AI一键生成安装脚本与抓取原型

最近在做一个机器人抓取相关的项目&#xff0c;偶然发现了openclaw这个开源工具。作为一个Python实现的轻量级抓取框架&#xff0c;它很适合快速搭建原型。不过在实际使用过程中&#xff0c;我发现它的安装和配置过程有点繁琐&#xff0c;特别是对新手不太友好。于是尝试用InsC…...

编程新知 2026/4/1 0:34:05

PX4无人机Offboard模式实战：从Gazebo仿真到真机避坑指南（附Python/C++代码对比）

PX4无人机Offboard模式全流程实战&#xff1a;从仿真到真机的Python/C双语言开发指南 1. Offboard模式核心原理与开发环境搭建 Offboard模式是PX4飞控系统中最为强大的控制模式之一&#xff0c;它允许开发者通过外部计算机&#xff08;如运行ROS的机载电脑&#xff09;发送精确…...

编程新知 2026/4/1 0:11:37

Janus-Pro-7B开发环境搭建：Ubuntu20.04系统配置全攻略

Janus-Pro-7B开发环境搭建&#xff1a;Ubuntu20.04系统配置全攻略 从零开始&#xff0c;手把手带你搭建Janus-Pro-7B多模态AI开发环境 如果你刚接触Janus-Pro-7B这个强大的多模态模型&#xff0c;可能会被环境配置的各种问题困扰。别担心&#xff0c;今天我就带你一步步在Ubunt…...

编程新知 2026/3/31 22:36:24

HUNYUAN-MT 7B翻译终端性能展示：并发请求压力测试与响应时间报告

HUNYUAN-MT 7B翻译终端性能展示&#xff1a;并发请求压力测试与响应时间报告 最近在星图GPU平台上部署了HUNYUAN-MT 7B翻译终端&#xff0c;很多朋友都好奇它的实际表现到底怎么样。特别是当多个用户同时使用时&#xff0c;它还能不能保持快速响应&#xff1f;会不会因为压力太…...

编程新知 2026/3/31 21:33:03

忍者像素绘卷效果实测：同一Prompt下不同步数对像素锐度影响对比分析

忍者像素绘卷效果实测&#xff1a;同一Prompt下不同步数对像素锐度影响对比分析 1. 测试背景与目的 忍者像素绘卷作为一款基于Z-Image-Turbo深度优化的图像生成工具&#xff0c;其独特的16-Bit复古游戏美学风格吸引了大量创作者。在实际使用中&#xff0c;我们发现"描绘…...

编程新知 2026/3/31 21:31:00

【内测开启】一个 Token，让你的Agent拥有地图能力！

各位AI大佬/极客朋友们&#xff1a; 期待已久的 百度地图 Map Agent Plan 正式开启首批内测招募啦&#xff01;✨ 我们深知独立开发者和 OpenClaw 玩家们的痛点&#xff0c;所以这次我们玩点不一样的&#xff1a; ✅ 极简集成&#xff1a; 告别复杂API申请流程&#xff0c;一个…...

编程新知 2026/3/31 21:24:59

Alibaba DASD-4B Thinking 对话工具在网络安全领域的应用：智能威胁分析与响应

Alibaba DASD-4B Thinking 对话工具在网络安全领域的应用&#xff1a;智能威胁分析与响应 每天&#xff0c;安全运维团队的工程师们都要面对海量的安全告警。防火墙日志、入侵检测系统的报警、终端防护软件的提示……这些信息像潮水一样涌来。传统的处理方式&#xff0c;往往依…...

编程新知 2026/3/31 20:52:29

Node.js版本管理神器NVM：从安装到实战的保姆级教程（Mac版）

Node.js版本管理神器NVM&#xff1a;从安装到实战的保姆级教程&#xff08;Mac版&#xff09; 作为一名长期在Mac环境下工作的前端开发者&#xff0c;我深刻体会到Node.js版本管理的重要性。不同项目可能依赖不同版本的Node.js&#xff0c;而手动切换版本不仅麻烦还容易出错。N…...

编程新知 2026/3/31 20:27:55

springboot+vue基于web的社区维修平台

目录同行可拿货,招校园代理 ,本人源头供货商功能模块划分技术实现要点扩展性设计项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商 功能模块划分 用户管理模块 注册与登录&#xff1a;支…...

编程新知 2026/3/31 20:03:34

Gemma-3-12b-it开源大模型落地：教育场景中图表解析与作业辅导应用

Gemma-3-12b-it开源大模型落地&#xff1a;教育场景中图表解析与作业辅导应用 1. 项目背景与核心价值 在教育领域&#xff0c;学生和教师经常面临图表解析和作业辅导的挑战。传统方法需要人工查阅资料或依赖专业软件&#xff0c;效率低下且成本高昂。Gemma-3-12b-it多模态交互…...

编程新知 2026/3/31 19:39:20