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

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

news 2026/3/30 13:22:16

需求如下：

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

解析：

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

H3C F1070防火墙console密码恢复实战指南

1. 当console密码成为拦路虎时 刚接手公司网络设备那会儿&#xff0c;我就被H3C F1070防火墙来了个下马威。那天机房搬迁后需要调试设备&#xff0c;结果发现前任管理员留下的console密码早已失效。这种场景就像你拿着钥匙回老家&#xff0c;却发现锁芯被换了一样尴尬。作为网络…...

编程新知 2026/3/30 13:08:26

【第四周】论文精读：Frustratingly Simple Retrieval Improves Challenging, Reasoning-Intensive Benchmarks

极简检索即可大幅刷新高难度推理基准主流观点认为简单RAG无法提升MMLU、MATH、GPQA等高难度推理任务&#xff0c;甚至会损害性能&#xff1b;本文推翻这一共识&#xff0c;证明核心瓶颈并非检索范式&#xff0c;而是缺少高质量、广覆盖、可单机部署的检索库&#xff1b;提出COM…...

编程新知 2026/3/30 12:56:22

Spring Boot项目实战：手把手教你配置Google Play订阅与Pub/Sub回调（含完整代码）

Spring Boot实战&#xff1a;构建高可靠Google Play订阅与Pub/Sub回调系统 在移动应用商业化路径中&#xff0c;应用内订阅已成为数字服务持续变现的核心模式。根据Statista数据&#xff0c;2023年全球应用订阅收入达到380亿美元&#xff0c;其中Google Play贡献了超过34%的份额…...

编程新知 2026/3/30 12:22:12

# 智能合约安全实战：重入攻击原理与防御机制详解（Solidity + Foundry）在以太坊生态中，**智能合约的安全性

智能合约安全实战&#xff1a;重入攻击原理与防御机制详解&#xff08;Solidity Foundry&#xff09; 在以太坊生态中&#xff0c;智能合约的安全性直接决定项目的生命线。近年来频繁爆发的漏洞事件表明&#xff0c;即使是看似简单的逻辑也可能埋藏致命隐患。其中&#xff0c;…...

编程新知 2026/3/30 11:56:03

HAL库定时器双杀技：STM32F401CCU6同时实现PWM输出+输入捕获的避坑指南

HAL库定时器双杀技&#xff1a;STM32F401CCU6同时实现PWM输出输入捕获的避坑指南 在嵌入式开发中&#xff0c;定时器是最基础也最强大的外设之一。对于STM32F4系列微控制器&#xff0c;HAL库提供了丰富的定时器功能&#xff0c;但如何在同一芯片上同时实现PWM输出和输入捕获&am…...

编程新知 2026/3/30 11:15:40

如何高效捕获网页媒体资源？猫抓插件让智能嗅探变得如此简单

如何高效捕获网页媒体资源&#xff1f;猫抓插件让智能嗅探变得如此简单 【免费下载链接】cat-catch 猫抓 chrome资源嗅探扩展 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否遇到过想保存网页上的精彩视频却找不到下载按钮的尴尬&#xff1f;是否曾…...

编程新知 2026/3/30 11:13:39

终极ESLyric歌词源配置指南：三步解锁酷狗QQ网易云逐字歌词

终极ESLyric歌词源配置指南&#xff1a;三步解锁酷狗QQ网易云逐字歌词 【免费下载链接】ESLyric-LyricsSource Advanced lyrics source for ESLyric in foobar2000 项目地址: https://gitcode.com/gh_mirrors/es/ESLyric-LyricsSource 想在Foobar2000中享受酷狗音乐、QQ…...

编程新知 2026/3/30 11:09:38

终极指南：如何轻松解包Godot PCK文件并提取游戏资源

终极指南&#xff1a;如何轻松解包Godot PCK文件并提取游戏资源 【免费下载链接】godot-unpacker godot .pck unpacker 项目地址: https://gitcode.com/gh_mirrors/go/godot-unpacker 还在为Godot游戏的PCK文件无法解包而烦恼吗&#xff1f;无论你是游戏开发者想要复用资…...

编程新知 2026/3/30 10:18:10

51页可编辑PPT | 农产品区块链溯源信息化平台整体解决方案

许多公司在数字化转型的过程中&#xff0c;常常面临数据孤岛、流程效率低下和客户体验不佳等问题。这些问题导致决策缓慢&#xff0c;难以快速响应市场变化&#xff0c;最终影响公司竞争力。方案的核心目标是帮助企业通过整合数据、优化流程和提升客户体验&#xff0c;实现数字…...

编程新知 2026/3/30 9:25:50

通义千问1.8B-Chat快速上手：vLLM部署+Chainlit界面实战体验

通义千问1.8B-Chat快速上手&#xff1a;vLLM部署Chainlit界面实战体验 1. 开篇&#xff1a;为什么选择这个组合&#xff1f; 如果你正在寻找一个轻量级但性能不俗的中文对话模型&#xff0c;通义千问1.8B-Chat绝对值得一试。这个1.8B参数的模型在保持较小体积的同时&#xff…...

编程新知 2026/3/30 7:39:06