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 台机器（称为容器更合适）。那么，将相近应用做一个合并，减少维护项目，提高…...
【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad（Adaptive Gradient Algorithm）是一种自适应学习率的优化算法，由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率，适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
高等数学（下）题型笔记（八）空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
VTK如何让部分单位不可见
最近遇到一个需求，需要让一个vtkDataSet中的部分单元不可见，查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行，是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示，主要是最后一个参数，透明度…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...
【VLNs篇】07：NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战，克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机
这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
日常一水C
多态 言简意赅：就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过，当子类和父类的函数名相同时，会隐藏父类的同名函数转而调用子类的同名函数，如果要调用父类的同名函数，那么就需要对父类进行引用&#…...
全面解析数据库：从基础概念到前沿应用
在数字化时代，数据已成为企业和社会发展的核心资产，而数据库作为存储、管理和处理数据的关键工具，在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理，到社交网络的用户数据存储，再到金融行业的交易记录处理&a…...