js实现拖动盒子查看内容 内容拖动
一.分析实现过程
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.鼠标拖动的操作是，按下鼠标不松，拖动鼠标，就需要监听鼠标点击事件(onmousedown),鼠标拖动事件(onmousemove) 2.鼠标拖动事件的监听时机，是在按下鼠标之后监听的，所以鼠标拖动事件需要放在鼠标按下事…...
[C#]winform利用seetaface6实现C#人脸检测活体检测口罩检测年龄预测性别判断眼睛状态检测
【官方框架地址】 https://github.com/ViewFaceCore/ViewFaceCore 【算法介绍】 SeetaFace6是由中国科技公司自主研发的一款人脸识别技术，它基于深度学习算法，能够快速、准确地识别出人脸，并且支持多种应用场景，如门禁系统、移动…...
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…...
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&…...
Java系列-Class.forName和ClassLoader.loadClass的区别
Class.forName 和 ClassLoader.loadClass 是 Java 中两种加载类的方式，它们的主要区别在于加载类的时机和对异常的处理。 1.Class.forName Class.forName 是一个静态方法，用于在运行时加载类。它返回一个 Class 对象，但在加载类的过程中&am…...
找不到模块 “path“ 或其相对应的类型声明
src别名的配置 在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名 // vite.config.ts import {defineConfig} from vite import vue from vitejs/plugin-vue import path from path export default defineConfig({plugins: [vue()],r…...
Linux第17步_安装SSH服务
secure shell protocol简称SSH。 目的：在进行数据传输之前，SSH先对联级数据包通过加密技术进行加密处理，然后再进行数据传输，确保数据传输安全。 1、在安装前，要检查虚拟机可以上网，否则可能会导致安装失…...
C语言—数据类型
变量和基本数据类型 变量类型的概念 变量是在程序中可以发生变化的量，变量是有类型的，变量的类型决定了变量存储空间的大小以及如何解释存储的位模式。 1字节（Byte）8位（bit） 定义格式 存储类型 数据…...
静态网页设计——多彩贵州（HTML+CSS+JavaScript）(dw、sublime Text、webstorm、HBuilder X)
前言 声明：该文章只是做技术分享，若侵权请联系我删除。！！ 感谢大佬的视频：https://www.bilibili.com/video/BV1cK411v7R2/?vd_source5f425e0074a7f92921f53ab87712357b 源码：https://space.bilibili.com…...
unity PDFRender Curved UI3.3
【PDF】PDFRender 链接：https://pan.baidu.com/s/1wSlmfiWTAHZKqEESxuMH6Q 提取码：csdn 【曲面ui】 Curved UI3.3 链接：https://pan.baidu.com/s/1uNZySJTW0-pPwi2FTE6fgA 提取码：csdn...
基于深度学习的停车位关键点检测系统（代码+原理）
摘要： DMPR-PS是一种基于深度学习的停车位检测系统，旨在实时监测和识别停车场中的停车位。该系统利用图像处理和分析技术，通过摄像头获取停车场的实时图像，并自动检测停车位的位置和状态。本文详细介绍了DMPR-PS系统的算法原理、…...
C#，入门教程(09)——运算符的基础知识
上一篇： C#，入门教程(08)——基本数据类型及使用的基础知识https://blog.csdn.net/beijinghorn/article/details/123906998 一、算术运算符号 算术运算符号包括：四则运算 加 , 减-, 乘*, 除/与取模%。 // 加法，运算 int va 1 …...
企业出海数据合规：GDPR中的个人数据与非个人数据之区分
GDPR仅适用于个人数据，这意味着非个人数据不在其适用范围内。因此，个人数据的定义是一个至关重要的因素，因为它决定了处理数据的实体是否要遵守该法规对数据控制者规定的各种义务。尽管如此，什么是个人数据仍然是当前数据保护制度…...
如何在Ubuntu搭建Emlog博客站点并发布至公网可随时远程访问管理界面——“cpolar内网穿透”
文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道（云端设置）2.3.Cpolar稳定隧道（本地设置） 3. 公网访问测试总结 前言 博客作为使…...
【金猿CIO展】是石科技CIO侯建业：算力产业赋能，促进数字经济建设
侯建业 本文由是石科技CIO侯建业撰写并投递参与“数据猿年度金猿策划活动——2023大数据产业年度优秀CIO榜单及奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 是石科技（江苏）有限公司成立于2021年，由国家超级计算无锡中心与…...
TypeScript 类
目录 1、实例 2、创建类的数据成员 3、创建实例化对象 4、完整实例 5、类的继承 6、继承类的方法重写 7、static关键字 8、instanceof运算符 9、访问控制修饰符 10、类和接口 TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。支持面向对…...
Oracle分区表
文章目录 A. varchar2类型时间字段(20240102)分区实战1. 表要不要分区2. 将已经存在的表改造为分区表(时间字段，varchar2类型)3. 增加分区3.1 增加分区3.2 置换分区，不会复制索引，不要用这种语法建表，这是专门为置换分区用的3.3 分…...
【leetcode】力扣算法之旋转图像【难度中等】
题目描述 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像，这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 用例 输入： matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&…...
【Java集合类篇】HashMap的数据结构是怎样的?
HashMap的数据结构是怎样的? ✔️HashMap的数据结构✔️ 数组✔️ 链表 ✔️HashMap的数据结构 在Java中，保存数据有两种比较简单的数据结构: 数组和链表（或红黑树）。 HashMap是 Java 中常用的数据结构，它实现了 Map 接口。Has…...
Spring 应用合并之路（一）：摸石头过河 | 京东云技术团队
公司在推进降本增效，在尝试多种手段之后，发现应用太多，每个应用都做跨机房容灾部署，则最少需要 4 台机器（称为容器更合适）。那么，将相近应用做一个合并，减少维护项目，提高…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置，使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
)
OpenLayers 分屏对比(地图联动)
注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...
MySQL账号权限管理指南：安全创建账户与精细授权技巧
在MySQL数据库管理中，合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号？ 最小权限原则…...
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数
高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
C/C++ 中附加包含目录、附加库目录与附加依赖项详解
在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...
Webpack性能优化：构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果：Webpack 4比Webpack 3构建时间降低60%-98%。原因： V8引擎优化（for of替代forEach、Map/Set替代Object）。默认使用更快的md4哈希算法。AST直接从Loa…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...