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 台机器（称为容器更合适）。那么，将相近应用做一个合并，减少维护项目，提高…...
Android13配置selinux让system应用可读sys,proc,SN号
system权限应用读sys,proc目录及SN号 Android13预置的system应用，需要读/sys, /proc目录，读(SN)serial number号, 需要修改selinux配置，否则会报avc错． 其修改方法会比Android11复杂一些． 实现 system_app.te中添加…...
防勒索病毒攻击的关键措施
【作者】朱向东 中原银行 高级工程师 在当今数字化时代，勒索病毒成为了企业和个人面临的一项严峻威胁。勒索病毒攻击可以导致数据丢失、系统瘫痪以及经济损失。为了保护自己和组织的利益，采取一系列的防范措施是至关重要的。下面是一些关键的措施&#…...
代表团坐车 - 华为OD统一考试
OD统一考试（B卷） 分值： 100分 题解： Java / Python / C++ 题目描述 某组织举行会议，来了多个代表团同时到达，接待处只有一辆汽车可以同时接待多个代表团，为了提高车辆利用率，请帮接待员计算可以坐满车的接待方案输出方案数量。 约束： 一个团只能上一辆车，并且代表团…...
运用Jmeter进行登录测试
开始了解Jmeter，写篇关于Jmeter的博客做备忘，这里以苏宁易购网站的登录请求为例实战来说明测试计划元件，创建一个 Web 测试计划。 今天简单介绍Jemeter的入门，Jmeter 的安装这边就跳过，直接讲述如何使用JMETER，如何运用Jmeter进行测试。 ａ．下载jmeter软件 ｂ．安装…...
Docker学习与应用（四）-容器数据卷
1、容器数据卷 1）什么是容器数据卷 docker的理念回顾 将应用和环境打包成一个镜像！ 数据？如果数据都在容器中，那么我们容器删除，数据就会丢失！需求：数据可以持久化 MySQL，容器删…...
CentOS 7.6下HTTP隧道代理的安全性考虑
在CentOS 7.6上配置HTTP隧道代理时，安全性是一个不可忽视的重要因素。以下是对HTTP隧道代理安全性的一些关键考虑因素： 1. 加密和数据安全 使用强加密算法：确保您使用的是经过广泛认可和强化的加密算法，如AES-256-GCM。数据完整…...
Mockito+junit5搞定单元测试
目录 一、简介1.1 单元测试的特点1.2 Mock类框架的使用场景1.3 常见的Mock框架1.3.1 Mockito1.3.2 EasyMock1.3.3 PowerMock1.3.4 Testable1.3.5 比较 二、Mockito的使用2.1 导入pom文件2.2 mock对象和spy对象2.3 初始化mock/spy对象的方式2.4 参数匹配2.5 方法插桩2.6 InjectM…...
PostgreSQL获取当天、昨天、本月、上个月、本年、去年的数据
gps_time为timestamp类型日期字段 获取当天的数据 WHERE DATE_TRUNC(day, gps_time) CURRENT_DATE --或 WHERE DATE(gps_time) CURRENT_DATE获取昨天的数据 WHERE DATE_TRUNC(day, gps_time) CURRENT_DATE - INTERVAL 1 day获取本月的数据 WHERE DATE_TRUNC(month, gps_…...
XCTF：stage1[WriteUP]
从题目中下载到图片： 考虑图片是png，隐写方式有可能是高宽修改，也可能是色相隐藏，色彩通道位隐藏等等 使用stegsolve对图片进行一下伽马、颜色转换 在图片的左上角就显示出了一个二维码 使用QR_Rresearch工具对二维码扫描 获得一…...
STM32CubeMX教程13 ADC - 单通道转换
目录 1、准备材料 2、实验目标 3、ADC概述 4、实验流程 4.0、前提知识 4.1、CubeMX相关配置 4.1.1、时钟树配置 4.1.2、外设参数配置 4.1.3、外设中断配置 4.2、生成代码 4.2.1、外设初始化调用流程 4.2.2、外设中断调用流程 4.2.3、添加其他必要代码 5、常用函数…...
网页设计培训包就业/windows优化大师怎么用
maven项目目录结构 1、创建maven项目目录结构 创建Maven项目必须按照maven项目约定的目录结构进行 除了mavenDemo是可变的之外，其余的目录结构，以及文件夹名称，pom.xml名称必须严格符合maven标准 posted on 2018-09-16 19:39 凉凉的风 阅读(.…...
西安疫情最新消息今天封城/苏州排名搜索优化
Linux下，如何将一个乱码的文件进行重命名方法一：命令格式：mv $(ls |egrep "[^a-zA-Z0-9.-]") tandao.tx[rootnb o]# ls |egrep "[^a-zA-Z0-9.-]"?-?ˉ? ###从找到文件中找出乱码文件[rootnb o]# mv $(ls |egrep "…...
苏州做网站建设公司/seo专业培训学费多少钱
1. 运行时常量池和静态变量都存储到了堆中，MetaSpace存储类的元数据，MetaSpace直接申请在本地内存中（Native memory）,这样类的元数据分配只受本地内存大小的限制,OOM问题就不存在了。除此之外，还有其他很多好处&#x…...
湛江企业自助建站/买卖交易网
1.查看当前的AWR保存策略select * from dba_hist_wr_control; DBID,SNAP_INTERVAL,RETENTION,TOPNSQL860524039,00 01:00:00.000000,07 00:00:00.000000,DEFAULT以上结果表示,每小时产生一个SNAPSHOT，保留7天2.调整AWR配置AWR配置都是通过dbms_workload_repository包…...
商丘市网/济宁seo公司
一、考试内容概述(一)基本理论知识1．数据结构的基本概念和基本术语，算法的描述，算法的时间复杂度和空间复杂度分析。2．线性表的定义，在线性表上常进行的基本操作，这些操作在顺序和链式存储结构下的实现及复…...
西安网站seo外包/成都计算机培训机构排名前十
本文转自：https://sobug.com/article/detail/11 SSRF概述 SSRF(Server-Side Request Forgery:服务器端请求伪造) 是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下，SSRF攻击的目标是从外网无法访问的内部系统。（正是因为它…...