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

js实现拖动盒子查看内容 内容拖动

news 2026/3/27 18:16:52

 

一.分析实现过程

1.鼠标拖动的操作是，按下鼠标不松，拖动鼠标，就需要监听鼠标点击事件(onmousedown),鼠标拖动事件(onmousemove)

2.鼠标拖动事件的监听时机，是在按下鼠标之后监听的，所以鼠标拖动事件需要放在鼠标按下事件(onmousedown)中

3.获取鼠标点击的位置A在外层盒子中可视区域x轴位置(clientX)及x轴滚动条位置B(scrollLeft)

4.在外层盒子中鼠标点击盒子的位置拖动的时候获取可视区域x轴位置C减去一开始点击的位置A,之后用位置B减去，C减A的值，这就是最终盒子需要跟随鼠标所拖动的位置

5.鼠标抬起释放事件

 

二.实现代码        

 <style>.outBox{width:300px;height:200px;background: blanchedalmond; overflow: hidden;margin:20px auto;}.innerBox{width: 600px;height: 200px;cursor: grab;}
</style>
<body><div class="outBox"><div class="innerBox"><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!</span><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!</span><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!</span><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!</span><span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis nam id neque cupiditate a, nihil corporis aut officiis nesciunt, incidunt consequuntur accusamus, iusto architecto nemo? Aspernatur omnis soluta molestiae excepturi!</span></div></div><script>let wrapperBox= document.querySelector('.outBox')let innerBox=document.querySelector('.innerBox')wrapperBox.onmousedown=function(e){let startX=e.clientX;let originalScrollX=wrapperBox.scrollLeft;document.onmousemove=function(e){let subs=e.clientX-startX; wrapperBox.scrollLeft= originalScrollX-subs;}//鼠标抬起释放事件document.onmouseup=function(){document.onmousemove=document.onmouseup=null; }}</script>
</body>

相关文章：

js实现拖动盒子查看内容 内容拖动

一.分析实现过程 1.鼠标拖动的操作是&#xff0c;按下鼠标不松&#xff0c;拖动鼠标&#xff0c;就需要监听鼠标点击事件(onmousedown),鼠标拖动事件(onmousemove) 2.鼠标拖动事件的监听时机&#xff0c;是在按下鼠标之后监听的&#xff0c;所以鼠标拖动事件需要放在鼠标按下事…...

编程日记 2024/1/8 17:28:33

[C#]winform利用seetaface6实现C#人脸检测活体检测口罩检测年龄预测性别判断眼睛状态检测

【官方框架地址】 https://github.com/ViewFaceCore/ViewFaceCore 【算法介绍】 SeetaFace6是由中国科技公司自主研发的一款人脸识别技术&#xff0c;它基于深度学习算法&#xff0c;能够快速、准确地识别出人脸&#xff0c;并且支持多种应用场景&#xff0c;如门禁系统、移动…...

编程日记 2024/1/8 17:27:32

c++ execl 执行 重定向

#include <unistd.h>int main() {pid_t childPid fork(); // 创建子进程if (childPid 0) {// 子进程// 关闭标准输入、输出和错误流close(STDIN_FILENO);close(STDOUT_FILENO);close(STDERR_FILENO);// 打开要写入的文件int fd open("output.txt", O_WRONLY…...

编程日记 2024/1/8 17:25:30

uni-app中实现元素拖动

uni-app中实现元素拖动 1、代码示例 <template><movable-area class"music-layout"><movable-view class"img-layout" :x"x" :y"y" direction"all"><img :src"musicDetail.bgUrl" :class&…...

编程日记 2024/1/8 17:23:28

Java系列-Class.forName和ClassLoader.loadClass的区别

Class.forName 和 ClassLoader.loadClass 是 Java 中两种加载类的方式&#xff0c;它们的主要区别在于加载类的时机和对异常的处理。 1.Class.forName Class.forName 是一个静态方法&#xff0c;用于在运行时加载类。它返回一个 Class 对象&#xff0c;但在加载类的过程中&am…...

编程日记 2024/1/8 17:22:27

找不到模块 “path“ 或其相对应的类型声明

src别名的配置 在开发项目的时候文件与文件关系可能很复杂&#xff0c;因此我们需要给src文件夹配置一个别名 // vite.config.ts import {defineConfig} from vite import vue from vitejs/plugin-vue import path from path export default defineConfig({plugins: [vue()],r…...

编程日记 2024/1/8 17:21:26

Linux第17步_安装SSH服务

secure shell protocol简称SSH。 目的&#xff1a;在进行数据传输之前&#xff0c;SSH先对联级数据包通过加密技术进行加密处理&#xff0c;然后再进行数据传输&#xff0c;确保数据传输安全。 1、在安装前&#xff0c;要检查虚拟机可以上网&#xff0c;否则可能会导致安装失…...

编程日记 2024/1/8 17:19:24

C语言—数据类型

变量和基本数据类型 变量类型的概念 变量是在程序中可以发生变化的量&#xff0c;变量是有类型的&#xff0c;变量的类型决定了变量存储空间的大小以及如何解释存储的位模式。 1字节&#xff08;Byte&#xff09;8位&#xff08;bit&#xff09; 定义格式 存储类型 数据…...

编程日记 2024/1/8 17:18:22

静态网页设计——多彩贵州（HTML+CSS+JavaScript）(dw、sublime Text、webstorm、HBuilder X)

前言 声明&#xff1a;该文章只是做技术分享&#xff0c;若侵权请联系我删除。&#xff01;&#xff01; 感谢大佬的视频&#xff1a;https://www.bilibili.com/video/BV1cK411v7R2/?vd_source5f425e0074a7f92921f53ab87712357b 源码&#xff1a;https://space.bilibili.com…...

编程日记 2024/1/8 17:16:21

unity PDFRender Curved UI3.3

【PDF】PDFRender 链接&#xff1a;https://pan.baidu.com/s/1wSlmfiWTAHZKqEESxuMH6Q 提取码&#xff1a;csdn 【曲面ui】 Curved UI3.3 链接&#xff1a;https://pan.baidu.com/s/1uNZySJTW0-pPwi2FTE6fgA 提取码&#xff1a;csdn...

编程日记 2024/1/8 17:15:20

基于深度学习的停车位关键点检测系统（代码+原理）

摘要&#xff1a; DMPR-PS是一种基于深度学习的停车位检测系统&#xff0c;旨在实时监测和识别停车场中的停车位。该系统利用图像处理和分析技术&#xff0c;通过摄像头获取停车场的实时图像&#xff0c;并自动检测停车位的位置和状态。本文详细介绍了DMPR-PS系统的算法原理、…...

编程日记 2024/1/8 17:10:16

C#，入门教程(09)——运算符的基础知识

上一篇&#xff1a; C#&#xff0c;入门教程(08)——基本数据类型及使用的基础知识https://blog.csdn.net/beijinghorn/article/details/123906998 一、算术运算符号 算术运算符号包括&#xff1a;四则运算 加 , 减-, 乘*, 除/与取模%。 // 加法&#xff0c;运算 int va 1 …...

编程日记 2024/1/8 17:08:15

企业出海数据合规：GDPR中的个人数据与非个人数据之区分

GDPR仅适用于个人数据&#xff0c;这意味着非个人数据不在其适用范围内。因此&#xff0c;个人数据的定义是一个至关重要的因素&#xff0c;因为它决定了处理数据的实体是否要遵守该法规对数据控制者规定的各种义务。尽管如此&#xff0c;什么是个人数据仍然是当前数据保护制度…...

编程日记 2024/1/8 17:07:14

如何在Ubuntu搭建Emlog博客站点并发布至公网可随时远程访问管理界面——“cpolar内网穿透”

文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总结 前言 博客作为使…...

编程日记 2024/1/8 17:06:13

【金猿CIO展】是石科技CIO侯建业：算力产业赋能，促进数字经济建设

‍ 侯建业 本文由是石科技CIO侯建业撰写并投递参与“数据猿年度金猿策划活动——2023大数据产业年度优秀CIO榜单及奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 是石科技&#xff08;江苏&#xff09;有限公司成立于2021年&#xff0c;由国家超级计算无锡中心与…...

编程日记 2024/1/8 17:05:12

TypeScript 类

目录 1、实例 2、创建类的数据成员 3、创建实例化对象 4、完整实例 5、类的继承 6、继承类的方法重写 7、static关键字 8、instanceof运算符 9、访问控制修饰符 10、类和接口 TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。支持面向对…...

编程日记 2024/1/8 17:04:11

Oracle分区表

文章目录 A. varchar2类型时间字段(20240102)分区实战1. 表要不要分区2. 将已经存在的表改造为分区表(时间字段&#xff0c;varchar2类型)3. 增加分区3.1 增加分区3.2 置换分区&#xff0c;不会复制索引&#xff0c;不要用这种语法建表&#xff0c;这是专门为置换分区用的3.3 分…...

编程日记 2024/1/8 17:03:10

【leetcode】力扣算法之旋转图像【难度中等】

题目描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 用例 输入&#xff1a; matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&…...

编程日记 2024/1/8 17:02:08

【Java集合类篇】HashMap的数据结构是怎样的?

HashMap的数据结构是怎样的? ✔️HashMap的数据结构✔️ 数组✔️ 链表 ✔️HashMap的数据结构 在Java中&#xff0c;保存数据有两种比较简单的数据结构: 数组和链表&#xff08;或红黑树&#xff09;。 HashMap是 Java 中常用的数据结构&#xff0c;它实现了 Map 接口。Has…...

编程日记 2024/1/8 16:57:04

Spring 应用合并之路（一）：摸石头过河 | 京东云技术团队

公司在推进降本增效&#xff0c;在尝试多种手段之后&#xff0c;发现应用太多&#xff0c;每个应用都做跨机房容灾部署&#xff0c;则最少需要 4 台机器&#xff08;称为容器更合适&#xff09;。那么&#xff0c;将相近应用做一个合并&#xff0c;减少维护项目&#xff0c;提高…...

编程日记 2024/1/8 16:56:03

飞书文档到Markdown的突破性转换技术：feishu2md架构深度解析

飞书文档到Markdown的突破性转换技术&#xff1a;feishu2md架构深度解析 【免费下载链接】feishu2md 一键命令下载飞书文档为 Markdown 项目地址: https://gitcode.com/gh_mirrors/fe/feishu2md 在当今企业协作环境中&#xff0c;飞书文档已成为团队知识沉淀的核心载体&…...

编程新知 2026/3/27 13:51:14

SDXL 1.0电影级绘图工坊高清图集：1536px输出下4K显示器全屏无像素感展示

SDXL 1.0电影级绘图工坊高清图集&#xff1a;1536px输出下4K显示器全屏无像素感展示 1. 项目简介 SDXL 1.0电影级绘图工坊是一款基于Stable Diffusion XL Base 1.0模型的AI绘图工具&#xff0c;专门为RTX 4090显卡优化设计。这个工具充分利用了4090显卡的24G大显存&#xff0…...

编程新知 2026/3/27 13:33:10

科哥CAM++镜像入门指南：快速搭建中文语音识别系统

CAM镜像入门指南&#xff1a;快速搭建中文语音识别系统 1. 系统概述 CAM说话人识别系统是一个基于深度学习的声纹识别工具&#xff0c;由科哥封装为易用的Docker镜像。它能快速判断两段语音是否来自同一说话人&#xff0c;并提取语音特征向量&#xff0c;适用于身份验证、语音…...

编程新知 2026/3/27 13:21:06

QQ音乐加密音频终极解密指南：qmcdump完整教程与实战应用

QQ音乐加密音频终极解密指南&#xff1a;qmcdump完整教程与实战应用 【免费下载链接】qmcdump 一个简单的QQ音乐解码&#xff08;qmcflac/qmc0/qmc3 转 flac/mp3&#xff09;&#xff0c;仅为个人学习参考用。 项目地址: https://gitcode.com/gh_mirrors/qm/qmcdump 你是…...

编程新知 2026/3/27 13:02:54

EasyAnimateV5-7b-zh-InP在计算机网络教学视频生成中的应用

EasyAnimateV5-7b-zh-InP在计算机网络教学视频生成中的应用 1. 引言 计算机网络课程的教学一直面临着一个难题&#xff1a;如何将抽象的网络协议、拓扑结构和数据传输过程直观地展示给学生。传统的静态图片和文字描述往往难以让学生真正理解数据包是如何在网络中流动的&#…...

编程新知 2026/3/27 12:08:22

如何快速下载Google Drive受保护PDF：终极免费解决方案指南

如何快速下载Google Drive受保护PDF&#xff1a;终极免费解决方案指南 【免费下载链接】Google-Drive-PDF-Downloader 项目地址: https://gitcode.com/gh_mirrors/go/Google-Drive-PDF-Downloader 你是否经常遇到Google Drive中那些"仅查看"权限的PDF文件&am…...

编程新知 2026/3/27 12:00:20

C++vector，智能指针，拷贝构造函数

我将分别介绍 C 中的智能指针、std::vector 动态数组以及拷贝构造函数的概念、用法和适用场景。一、C 智能指针智能指针是用于自动化管理动态分配内存的模板类&#xff0c;位于 <memory> 头文件中。它们通过 RAII&#xff08;Resource Acquisition Is Initialization&…...

编程新知 2026/3/27 11:56:17

线程池：Java 并发编程的核心武器

线程池&#xff1a;Java 并发编程的"核心武器" 线程池是管理和复用线程的高级工具&#xff0c;它能显著提高程序性能&#xff0c;避免频繁创建和销毁线程的开销。 为什么需要线程池&#xff1f; 没有线程池的问题 // 传统方式&#xff1a;来一个任务创建一个线程 pub…...

编程新知 2026/3/27 11:29:59

别再让AI瞎忙活了！用Claude Code的SubAgent打造你的专属开发团队（附React项目实战）

别再让AI瞎忙活了&#xff01;用Claude Code的SubAgent打造你的专属开发团队&#xff08;附React项目实战&#xff09; 在软件开发的世界里&#xff0c;我们常常面临一个困境&#xff1a;要么雇佣一个庞大的团队&#xff0c;每个成员各司其职但成本高昂&#xff1b;要么依赖全能…...

编程新知 2026/3/27 11:25:58

技能组合玩法：OpenClaw串联百川2-13B-4bits与Stable Diffusion技能

技能组合玩法&#xff1a;OpenClaw串联百川2-13B-4bits与Stable Diffusion技能 1. 为什么需要技能组合&#xff1f; 去年我运营技术博客时&#xff0c;最头疼的就是内容生产的全流程管理。写一篇文章需要经历选题构思、文案撰写、配图制作、格式调整、发布上线等多个环节。每…...

编程新知 2026/3/27 10:27:44