前端开发：创建可拖动的固定位置 `＜div＞` 和自动隐藏悬浮按钮
在前端开发中，实现一个可拖动的固定位置 <div>，并且根据拖动的状态控制其显示和隐藏，同时在特定条件下显示悬浮按钮，涉及以下技术和原理：
技术细节和实现步骤：
1. HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Fixed Div with Auto Hide and Floating Button</title>
<style>/* CSS 样式，定义拖拽元素和悬浮按钮的样式 */
</style>
</head>
<body><!-- 拖拽的固定位置的 div -->
<div id="draggable"><p>Drag me!</p><button>Click me</button>
</div><!-- 默认显示的悬浮按钮 -->
<div id="dragButton">Show</div><!-- JavaScript 脚本，实现拖拽、自动隐藏和按钮显示逻辑 -->
<script>// JavaScript 代码部分
</script></body>
</html>2. CSS 样式：
#draggable {width: 200px;height: 200px;background-color: #ccc;position: fixed;top: 50px;left: 50px;touch-action: none; /* 禁止浏览器默认行为，如滚动 */transition: transform 0.3s ease;
}#draggable.hidden {transform: scale(0);visibility: hidden;
}#dragButton {position: fixed;bottom: 20px;right: 20px;background-color: #007bff;color: white;padding: 10px 20px;cursor: pointer;
}• #draggable 样式：定义拖拽元素的基本样式，包括固定位置、尺寸、背景色等。
• .hidden 类样式：用于控制拖拽元素隐藏时的动画效果。
• #dragButton 样式：定义悬浮按钮的基本样式，包括位置、背景色、文字颜色等。
3. JavaScript 交互：
const draggable = document.getElementById('draggable');
const dragButton = document.getElementById('dragButton');
let offsetX, offsetY;
let isDragging = false;
let autoHideTimeout;
let lastVisiblePosition = { top: 50, left: 50 }; // 初始位置// 触摸事件处理
draggable.addEventListener('touchstart', touchStart);
draggable.addEventListener('touchmove', touchMove);
draggable.addEventListener('touchend', touchEnd);// 鼠标事件处理
draggable.addEventListener('mousedown', mouseDown);
document.addEventListener('mousemove', mouseMove);
document.addEventListener('mouseup', mouseUp);// 初始隐藏拖拽元素
draggable.classList.add('hidden');function touchStart(e) {const touch = e.touches[0];offsetX = touch.clientX - draggable.getBoundingClientRect().left;offsetY = touch.clientY - draggable.getBoundingClientRect().top;isDragging = true;
}function touchMove(e) {if (!isDragging) return;e.preventDefault(); // 阻止默认的滚动行为const touch = e.touches[0];let newX = touch.clientX - offsetX;let newY = touch.clientY - offsetY;// 限制拖动范围在可视区域内const maxX = document.documentElement.clientWidth - draggable.offsetWidth;const maxY = document.documentElement.clientHeight - draggable.offsetHeight;newX = Math.max(0, Math.min(newX, maxX));newY = Math.max(0, Math.min(newY, maxY));draggable.style.left = `${newX}px`;draggable.style.top = `${newY}px`;// 判断靠近边缘并自动贴边if (newX < 10) {draggable.style.left = '0';} else if (newX > maxX - 10) {draggable.style.left = `${maxX}px`;}if (newY < 10) {draggable.style.top = '0';} else if (newY > maxY - 10) {draggable.style.top = `${maxY}px`;}// 更新最后显示位置lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };// 自动隐藏计时器重置clearTimeout(autoHideTimeout);draggable.classList.remove('hidden');dragButton.style.display = 'none';
}function touchEnd() {isDragging = false;// 设置自动隐藏autoHideTimeout = setTimeout(() => {draggable.classList.add('hidden');// 固定悬浮按钮位置dragButton.style.top = '20px';dragButton.style.right = '20px';dragButton.style.display = 'block';}, 5000); // 5秒后自动隐藏
}function mouseDown(e) {offsetX = e.clientX - draggable.getBoundingClientRect().left;offsetY = e.clientY - draggable.getBoundingClientRect().top;isDragging = true;
}function mouseMove(e) {if (!isDragging) return;e.preventDefault(); // 阻止默认的拖动行为let newX = e.clientX - offsetX;let newY = e.clientY - offsetY;// 限制拖动范围在可视区域内const maxX = document.documentElement.clientWidth - draggable.offsetWidth;const maxY = document.documentElement.clientHeight - draggable.offsetHeight;newX = Math.max(0, Math.min(newX, maxX));newY = Math.max(0, Math.min(newY, maxY));draggable.style.left = `${newX}px`;draggable.style.top = `${newY}px`;// 判断靠近边缘并自动贴边if (newX < 10) {draggable.style.left = '0';} else if (newX > maxX - 10) {draggable.style.left = `${maxX}px`;}if (newY < 10) {draggable.style.top = '0';} else if (newY > maxY - 10) {draggable.style.top = `${maxY}px`;}// 更新最后显示位置lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };// 自动隐藏计时器重置clearTimeout(autoHideTimeout);draggable.classList.remove('hidden');dragButton.style.display = 'none';
}function mouseUp() {isDragging = false;// 设置自动隐藏autoHideTimeout = setTimeout(() => {draggable.classList.add('hidden');// 固定悬浮按钮位置dragButton.style.top = '20px';dragButton.style.right = '20px';dragButton.style.display = 'block';}, 5000); // 5秒后自动隐藏
}dragButton.addEventListener('click', () => {draggable.classList.remove('hidden');dragButton.style.display = 'none';
});技术和原理分析：
• HTML 结构：使用 <div> 元素创建拖拽的固定位置容器和悬浮按钮，配合 CSS 控制其样式。
• CSS 样式：定义了拖拽元素和悬浮按钮的基本样式，包括位置、背景色等，利用 transition 属性实现元素显示隐藏的动画效果。
• JavaScript 交互：
• 拖拽实现：通过 touchstart, touchmove, touchend, mousedown, mousemove, mouseup 等事件监听器，实现移动设备和桌面设备上的拖拽功能。在拖动过程中，更新拖拽元素的位置，并根据距离屏幕边缘的距离自动贴边。
• 自动隐藏和按钮显示逻辑：利用 setTimeout 实现拖拽元素在一定时间内无操作后自动隐藏，并显示固定位置的悬浮按钮。点击悬浮按钮则重新显示拖拽元素。可以根据需要选择显示固定位置或者根据最后显示位置动态调整的悬浮按钮。
最后完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Fixed Div with Auto Hide and Floating Button</title>
<style>#draggable {width: 200px;height: 200px;background-color: #ccc;position: fixed;top: 50px;left: 50px;touch-action: none; /* 禁止浏览器默认行为，如滚动 */transition: transform 0.3s ease;}#draggable.hidden {transform: scale(0);visibility: hidden;}/* 默认固定悬浮按钮 */#dragButton {position: fixed;bottom: 20px;right: 20px;background-color: #007bff;color: white;padding: 10px 20px;cursor: pointer;}/* 根据最后显示位置调整的悬浮按钮 *//*#dragButton.dynamic {position: fixed;background-color: #007bff;color: white;padding: 10px 20px;cursor: pointer;display: none;}*/
</style>
</head>
<body><div id="draggable"><p>Drag me!</p><button>Click me</button>
</div><div id="dragButton" class="fixed">Show</div>
<!-- <div id="dragButton" class="dynamic">Show</div> --><script>const draggable = document.getElementById('draggable');const dragButton = document.getElementById('dragButton');let offsetX, offsetY;let isDragging = false;let autoHideTimeout;let lastVisiblePosition = { top: 50, left: 50 }; // 初始位置// 触摸事件处理draggable.addEventListener('touchstart', touchStart);draggable.addEventListener('touchmove', touchMove);draggable.addEventListener('touchend', touchEnd);// 鼠标事件处理draggable.addEventListener('mousedown', mouseDown);document.addEventListener('mousemove', mouseMove);document.addEventListener('mouseup', mouseUp);draggable.classList.add('hidden');function touchStart(e) {const touch = e.touches[0];offsetX = touch.clientX - draggable.getBoundingClientRect().left;offsetY = touch.clientY - draggable.getBoundingClientRect().top;isDragging = true;}function touchMove(e) {if (!isDragging) return;e.preventDefault(); // 阻止默认的滚动行为const touch = e.touches[0];let newX = touch.clientX - offsetX;let newY = touch.clientY - offsetY;// 限制拖动范围在可视区域内const maxX = document.documentElement.clientWidth - draggable.offsetWidth;const maxY = document.documentElement.clientHeight - draggable.offsetHeight;newX = Math.max(0, Math.min(newX, maxX));newY = Math.max(0, Math.min(newY, maxY));draggable.style.left = `${newX}px`;draggable.style.top = `${newY}px`;// 判断靠近边缘并自动贴边if (newX < 10) {draggable.style.left = '0';} else if (newX > maxX - 10) {draggable.style.left = `${maxX}px`;}if (newY < 10) {draggable.style.top = '0';} else if (newY > maxY - 10) {draggable.style.top = `${maxY}px`;}// 更新最后显示位置lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };// 自动隐藏计时器重置clearTimeout(autoHideTimeout);draggable.classList.remove('hidden');dragButton.style.display = 'none';}function touchEnd() {isDragging = false;// 设置自动隐藏autoHideTimeout = setTimeout(() => {draggable.classList.add('hidden');// 固定悬浮按钮位置dragButton.style.top = '20px';dragButton.style.right = '20px';dragButton.style.display = 'block';// 动态悬浮按钮位置/*dragButton.classList.add('dynamic');dragButton.style.top = `${lastVisiblePosition.top}px`;dragButton.style.left = `${lastVisiblePosition.left}px`;*/}, 5000); // 5秒后自动隐藏}function mouseDown(e) {offsetX = e.clientX - draggable.getBoundingClientRect().left;offsetY = e.clientY - draggable.getBoundingClientRect().top;isDragging = true;}function mouseMove(e) {if (!isDragging) return;e.preventDefault(); // 阻止默认的拖动行为let newX = e.clientX - offsetX;let newY = e.clientY - offsetY;// 限制拖动范围在可视区域内const maxX = document.documentElement.clientWidth - draggable.offsetWidth;const maxY = document.documentElement.clientHeight - draggable.offsetHeight;newX = Math.max(0, Math.min(newX, maxX));newY = Math.max(0, Math.min(newY, maxY));draggable.style.left = `${newX}px`;draggable.style.top = `${newY}px`;// 判断靠近边缘并自动贴边if (newX < 10) {draggable.style.left = '0';} else if (newX > maxX - 10) {draggable.style.left = `${maxX}px`;}if (newY < 10) {draggable.style.top = '0';} else if (newY > maxY - 10) {draggable.style.top = `${maxY}px`;}// 更新最后显示位置lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };// 自动隐藏计时器重置clearTimeout(autoHideTimeout);draggable.classList.remove('hidden');dragButton.style.display = 'none';}function mouseUp() {isDragging = false;// 设置自动隐藏autoHideTimeout = setTimeout(() => {draggable.classList.add('hidden');// 固定悬浮按钮位置 dragButton.style.right = '20px';dragButton.style.display = 'block';// 动态悬浮按钮位置/*dragButton.classList.add('dynamic');dragButton.style.top = `${lastVisiblePosition.top}px`;dragButton.style.left = `${lastVisiblePosition.left}px`;*/}, 5000); // 5秒后自动隐藏}dragButton.addEventListener('click', () => {draggable.classList.remove('hidden');dragButton.style.display = 'none';// 动态悬浮按钮位置的显示控制// dragButton.classList.remove('dynamic');});
</script></body>
</html>这篇博客文章介绍了如何利用 HTML、CSS 和 JavaScript 实现一个具有拖拽、自动隐藏和悬浮按钮的交互效果，适用于创建可定制的用户界面体验。
相关文章：
前端开发：创建可拖动的固定位置 `＜div＞` 和自动隐藏悬浮按钮
在前端开发中，实现一个可拖动的固定位置 <div>，并且根据拖动的状态控制其显示和隐藏，同时在特定条件下显示悬浮按钮，涉及以下技术和原理： 技术细节和实现步骤： 1. HTML 结构： <!DOC…...
Java Bean Validation 注解：@NotEmpty、@NotBlank 和 @NotNull 的区别
1. 概述 Bean Validation 是 Java 提供的一种对 Java Bean 实例的字段或方法参数进行校验的标准机制。它允许开发者使用注解的方式定义验证逻辑，这些注解可以在类、字段或者方法上声明，并且可以被任何实现了 JSR 303/JSR 349 规范的框架（如 …...
Java | Leetcode Java题解之第322题零钱兑换
题目： 题解： public class Solution {public int coinChange(int[] coins, int amount) {int max amount 1;int[] dp new int[amount 1];Arrays.fill(dp, max);dp[0] 0;for (int i 1; i < amount; i) {for (int j 0; j < coins.length; j)…...
Linux初启征程指南：攻克常见系统指令与权限初理解
有时候觉得，电脑就像一个高贵冷艳的妹纸。 400，是她冷冰冰地说：“我听不懂你在说什么”； 401，是她无情地转身：“我不认识你，别说那些奇怪的话”； 403，是她残酷的拒绝&…...
第十九节、野猪受伤死亡逻辑动画
一、协程 在这个代码中，update更新非常快，不会有时间去addforce增加力 所以需要使用协程，同时开启 1、写法 WaitForSeconds(0.45f) 意思是等待时间0.45秒后 写完协程程序后，需要开启 ，固定写法如下 2、注意 dir是局…...
vue 开发工具 Hbuilder 简介及应用
一、简介 HBuilderX 是一款流行的前端开发工具，由DCloud公司开发。它支持多种编程语言，如HTML、CSS、JavaScript、Vue、UniApp等，非常适合用来开发Web应用、移动端应用和跨平台应用。 官网地址：https://www.dcloud.io/hbuilderx.…...
【杂谈】-MQTT与HTTP在物联网中的比较：为什么MQTT是更好的选择
MQTT与HTTP在物联网中的比较：为什么MQTT是更好的选择 文章目录 MQTT与HTTP在物联网中的比较：为什么MQTT是更好的选择1、什么是MQTT2、什么是HTTP3、MQTT和HTTP之间的差异 MQTT（消息队列遥测传输）和HTTP（超文本传输协议…...
冠豪猪优化算法（CPO）、卷积神经网络（CNN）与支持向量机（SVM）结合的预测模型（CPO-CNN-SVM）及其Python和MATLAB实现
### 一、背景 在现代数据挖掘和机器学习领域，特征选择与模型优化是两个重要的研究方向。随着深度学习的发展，卷积神经网络（CNN）在图像、视频等多媒体数据处理中的表现优异。然而，传统的CNN模型通常需要大量的标注数据和…...
【通信原理】
通信原理 二、频谱与随机信号2.1 频谱2.1.1 频谱or频谱密度函数2.1.2 幅度谱（幅频特性）or相位谱（相频特性） 2.2 能量信号2.2.1 什么是能量信号2.2.2 巴塞瓦尔定理2.2.3 维纳钦辛定理 2.3 功率信号2.3.1 功率信号2.3.2 巴塞瓦尔定理…...
有序数组的平方（LeetCode）
题目 给你一个按 非递减顺序 排序的整数数组 nums，返回 每个数字的平方 组成的新数组，要求也按 非递减顺序 排序。 解题 以下算法时间复杂度为 def sortedSquares(nums):n len(nums)result [0] * n # 创建一个结果数组，长度与 nums 相同le…...
Python配置镜像
1. 查看当前源 pip config get global.index-url 2. 临时变更源 pip install paddlepaddle -i https://mirror.baidu.com/pypi/simple 3. 永久变更源 清华（推荐速度最快） pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple 百…...
Python新手错误集锦（PyCharm）
# 自学Python，用Pycharm作环境。我这个手新到这时我学习的第一个编程软件，且本人专业是化学，以前对电脑最高级的使用是玩扫雷游戏。所以这里集合的错误都是小透明错误，大部分人请绕道。不断更新中...... 缩进错误 记住“indent”…...
CTFHUB-web-RCE-php://input
开启题目 网页显示源代码，判断如果参数以 php:// 开头，那么执行 include 函数将参数值作为文件包含进来。否则，输出字符串 Hacker 。 点击下面的 phpinfo 跳转之后发现了一个 php 版本页面 使用 file 查看 php://input， 感觉这个…...
Python网络爬虫核心面试题
网络爬虫 1. 爬虫项目中如何处理请求失败的问题？2. 解释HTTP协议中的持久连接和非持久连接。3. 什么是HTTP的持久化Cookie和会话Cookie？4. 如何在爬虫项目中检测并处理网络抖动和丢包？5. 在爬虫项目中，如何使用HEAD请求提高效率&a…...
DSL domain specific language of Kola
How we design Kola - ApiHugKola background, Kola a consumer driver tester frameworkhttps://apihug.com/zhCN-docs/kola/003_dsl_contract Concept 在 Kola 定位中 Kola 是什么, 是致力于提供一个让相关各方都能够理解共同创造的测试框架和工具。 同时 Kola 是建立于业界…...
【RISC-V设计-05】- RISC-V处理器设计K0A之GPR
【RISC-V设计-05】- RISC-V处理器设计K0A之GPR 文章目录 【RISC-V设计-05】- RISC-V处理器设计K0A之GPR1.简介2.设计顶层3.内部结构4.端口说明5.设计代码6.总结 1.简介 通用寄存器（General Purpose Register）是处理器设计中的重要组成部分，在…...
Linux/C 高级——shell脚本
1. shell脚本基础概念 1.1概念 shell使用方式：手动下命令和脚本 脚本本质是一个文件，文件里面存放的是特定格式的指令，系统可以使用脚本解析器翻译或解析指令并执行（它不需要编译）。 shell脚本本质：shell命…...
SpringBoot面试题整理（1）
面试整理 前置知识 ApplicationContextInitializerApplicationListenerBeanFactoryBeanDefinitionBeanFactoryPostProcessorAwareInitializingBean/DisposableBeanBeanPostProcessor 面试题 SpringBoot启动流程IOC容器初始化流程Bean声明周期Bean循环依赖SpringMVC执行流程…...
LVS原理及实例
目录 LVS原理 LVS概念 lvs集群的类型 lvs-nat 解释 传输过程 lvs-dr 解释 传输过程 特点 lvs-tun LVS（Linux Virtual Server）常见的调度算法 防火墙标记（Firewall Marking）结合轮询调度 实战案例 lvs的nat模式配置 …...
Spring统一功能处理：拦截器、响应与异常的统一管理
目录 一.拦截器 二.统一数据返回格式 三.统一异常处理 一.拦截器 拦截器是Spring框架提供的核⼼功能之⼀，主要⽤来拦截⽤⼾的请求，在指定⽅法前后，根据业务需要执⾏预先设定的代码。 也就是说，允许开发⼈员提前预定义⼀些逻辑…...
从零到一：用Python打造你的专属桌面宠物，附完整源码与exe打包指南
1. 环境准备与工具安装 第一次接触Python桌面应用开发的朋友可能会觉得无从下手，但其实只需要准备好几个基础工具就能轻松开始。我刚开始做桌宠项目时也踩过不少坑，这里把最稳妥的配置方案分享给大家。 Python环境是首要条件，推荐使用3.8以上…...
为什么Logisim-Evolution是数字电路学习的最佳选择？
为什么Logisim-Evolution是数字电路学习的最佳选择？ 【免费下载链接】logisim-evolution Digital logic design tool and simulator 项目地址: https://gitcode.com/gh_mirrors/lo/logisim-evolution 在数字逻辑的世界里，你是否曾为理解抽象的逻辑…...
网络工程师的TestCenter组播测试避坑指南：从IGMP Snooping配置到流统计解读
TestCenter组播测试实战避坑手册：从IGMP配置到流统计的深度解析 组播测试在网络工程领域一直是个既基础又充满陷阱的技术环节。记得去年参与某金融数据中心升级项目时，团队花了整整三天时间排查一个看似简单的组播流不通问题，最终发现竟是IGM…...
阿尔兹海默症生物标志物研究进展及应用指南
一、引言阿尔兹海默症是一种以进行性认知功能障碍为主要特征的神经退行性疾病，其病理改变往往在临床症状出现前数年至数十年即已启动。早期诊断与干预对于延缓疾病进展、改善患者生活质量具有关键意义。生物标志物作为可客观测量与评估的生物学指标，在疾…...
2026届毕业生推荐的AI学术神器实测分析
Ai论文网站排名（开题报告、文献综述、降aigc率、降重综合对比） TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 在当下的学术环境之中，那样的AI论文网站已然变成了研究辅助方面极具关键作用的工…...
SEO 优化者如何提高网站的转化率
SEO 优化者如何提高网站的转化率 在当今数字化时代，网站的转化率已经成为衡量一个网站成功与否的重要指标之一。对于 SEO 优化者来说，提升网站的转化率不仅能够带来更多的实际业务，还能够为企业赢得更多的客户。SEO 优化者如何在实际操作中提…...
品牌承诺怎么写：一句承诺如何既让客户心动，又不让企业冒进
在很多B2B企业的品牌项目中，品牌承诺通常是一个非常容易被“重视错方向”的模块。 企业往往会把大量注意力放在“这句话够不够有气势”“够不够像品牌”“销售讲起来顺不顺”，但忽略了一个更底层的问题：这句话一旦公开使用，企业到…...
别再让大模型瞎猜了！用这个提示词模板，轻松搞定多跳问题检索（附Qwen2.5-7B实测效果）
解锁小模型潜力：多跳问题检索的提示词工程实战指南 在构建基于大语言模型的检索增强生成（RAG）系统时，开发者常面临一个棘手问题：当用户提出需要多步推理的复杂查询时，直接使用原始问题检索往往效果不佳。这…...
探索TMSpeech：解锁Windows本地实时语音转文字的高效工作流
探索TMSpeech：解锁Windows本地实时语音转文字的高效工作流 【免费下载链接】TMSpeech 腾讯会议摸鱼工具 项目地址: https://gitcode.com/gh_mirrors/tm/TMSpeech 还在为会议记录手忙脚乱？还在为在线课程跟不上节奏而烦恼？TMSpeech为你…...
2026年4月OpenClaw怎么部署？腾讯云零门槛流程：含安装及大模型API、Skill配置
2026年4月OpenClaw怎么部署？腾讯云零门槛流程：含安装及大模型API、Skill配置。OpenClaw（原Clawdbot）作为2026年主流的AI自动化助理平台，可通过阿里云轻量服务器实现724小时稳定运行，并快速接入钉钉…...