• 前端开发：创建可拖动的固定位置 `＜div＞` 和自动隐藏悬浮按钮

    在前端开发中，实现一个可拖动的固定位置

    ，并且根据拖动的状态控制其显示和隐藏，同时在特定条件下显示悬浮按钮，涉及以下技术和原理：

    技术细节和实现步骤：

    1. HTML 结构：

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>Draggable Fixed Div with Auto Hide and Floating Buttontitle>
    7. <style>
    8.   /* CSS 样式，定义拖拽元素和悬浮按钮的样式 */
    9. style>
    10. head>
    11. <body>
    12.  
    14. <div id="draggable">
    15.   <p>Drag me!p>
    16.   <button>Click mebutton>
    17. div>
    18.  
    20. <div id="dragButton">Showdiv>
    21.  
    23. <script>
    24.   // JavaScript 代码部分
    25. script>
    26.  
    27. body>
    28. html>

    2. CSS 样式：

    1. #draggable {
    2.   width: 200px;
    3.   height: 200px;
    4.   background-color: #ccc;
    5.   position: fixed;
    6.   top: 50px;
    7.   left: 50px;
    8.   touch-action: none; /* 禁止浏览器默认行为，如滚动 */
    9.   transition: transform 0.3s ease;
    10. }
    11.  
    12. #draggable.hidden {
    13.   transform: scale(0);
    14.   visibility: hidden;
    15. }
    16.  
    17. #dragButton {
    18.   position: fixed;
    19.   bottom: 20px;
    20.   right: 20px;
    21.   background-color: #007bff;
    22.   color: white;
    23.   padding: 10px 20px;
    24.   cursor: pointer;
    25. }

            • #draggable 样式：定义拖拽元素的基本样式，包括固定位置、尺寸、背景色等。

            • .hidden 类样式：用于控制拖拽元素隐藏时的动画效果。

            • #dragButton 样式：定义悬浮按钮的基本样式，包括位置、背景色、文字颜色等。

    3. JavaScript 交互：

    1. const draggable = document.getElementById('draggable');
    2. const dragButton = document.getElementById('dragButton');
    3. let offsetX, offsetY;
    4. let isDragging = false;
    5. let autoHideTimeout;
    6. let lastVisiblePosition = { top: 50, left: 50 }; // 初始位置
    7.  
    8. // 触摸事件处理
    9. draggable.addEventListener('touchstart', touchStart);
    10. draggable.addEventListener('touchmove', touchMove);
    11. draggable.addEventListener('touchend', touchEnd);
    12.  
    13. // 鼠标事件处理
    14. draggable.addEventListener('mousedown', mouseDown);
    15. document.addEventListener('mousemove', mouseMove);
    16. document.addEventListener('mouseup', mouseUp);
    17.  
    18. // 初始隐藏拖拽元素
    19. draggable.classList.add('hidden');
    20.  
    21. function touchStart(e) {
    22.   const touch = e.touches[0];
    23.   offsetX = touch.clientX - draggable.getBoundingClientRect().left;
    24.   offsetY = touch.clientY - draggable.getBoundingClientRect().top;
    25.   isDragging = true;
    26. }
    27.  
    28. function touchMove(e) {
    29.   if (!isDragging) return;
    30.  
    31.   e.preventDefault(); // 阻止默认的滚动行为
    32.  
    33.   const touch = e.touches[0];
    34.   let newX = touch.clientX - offsetX;
    35.   let newY = touch.clientY - offsetY;
    36.  
    37.   // 限制拖动范围在可视区域内
    38.   const maxX = document.documentElement.clientWidth - draggable.offsetWidth;
    39.   const maxY = document.documentElement.clientHeight - draggable.offsetHeight;
    40.   newX = Math.max(0, Math.min(newX, maxX));
    41.   newY = Math.max(0, Math.min(newY, maxY));
    42.  
    43.   draggable.style.left = `${newX}px`;
    44.   draggable.style.top = `${newY}px`;
    45.  
    46.   // 判断靠近边缘并自动贴边
    47.   if (newX < 10) {
    48.     draggable.style.left = '0';
    49.   } else if (newX > maxX - 10) {
    50.     draggable.style.left = `${maxX}px`;
    51.   }
    52.   if (newY < 10) {
    53.     draggable.style.top = '0';
    54.   } else if (newY > maxY - 10) {
    55.     draggable.style.top = `${maxY}px`;
    56.   }
    57.  
    58.   // 更新最后显示位置
    59.   lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };
    60.  
    61.   // 自动隐藏计时器重置
    62.   clearTimeout(autoHideTimeout);
    63.   draggable.classList.remove('hidden');
    64.   dragButton.style.display = 'none';
    65. }
    66.  
    67. function touchEnd() {
    68.   isDragging = false;
    69.  
    70.   // 设置自动隐藏
    71.   autoHideTimeout = setTimeout(() => {
    72.     draggable.classList.add('hidden');
    73.     // 固定悬浮按钮位置
    74.     dragButton.style.top = '20px';
    75.     dragButton.style.right = '20px';
    76.     dragButton.style.display = 'block';
    77.   }, 5000); // 5秒后自动隐藏
    78. }
    79.  
    80. function mouseDown(e) {
    81.   offsetX = e.clientX - draggable.getBoundingClientRect().left;
    82.   offsetY = e.clientY - draggable.getBoundingClientRect().top;
    83.   isDragging = true;
    84. }
    85.  
    86. function mouseMove(e) {
    87.   if (!isDragging) return;
    88.  
    89.   e.preventDefault(); // 阻止默认的拖动行为
    90.  
    91.   let newX = e.clientX - offsetX;
    92.   let newY = e.clientY - offsetY;
    93.  
    94.   // 限制拖动范围在可视区域内
    95.   const maxX = document.documentElement.clientWidth - draggable.offsetWidth;
    96.   const maxY = document.documentElement.clientHeight - draggable.offsetHeight;
    97.   newX = Math.max(0, Math.min(newX, maxX));
    98.   newY = Math.max(0, Math.min(newY, maxY));
    99.  
    100.   draggable.style.left = `${newX}px`;
    101.   draggable.style.top = `${newY}px`;
    102.  
    103.   // 判断靠近边缘并自动贴边
    104.   if (newX < 10) {
    105.     draggable.style.left = '0';
    106.   } else if (newX > maxX - 10) {
    107.     draggable.style.left = `${maxX}px`;
    108.   }
    109.   if (newY < 10) {
    110.     draggable.style.top = '0';
    111.   } else if (newY > maxY - 10) {
    112.     draggable.style.top = `${maxY}px`;
    113.   }
    114.  
    115.   // 更新最后显示位置
    116.   lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };
    117.  
    118.   // 自动隐藏计时器重置
    119.   clearTimeout(autoHideTimeout);
    120.   draggable.classList.remove('hidden');
    121.   dragButton.style.display = 'none';
    122. }
    123.  
    124. function mouseUp() {
    125.   isDragging = false;
    126.  
    127.   // 设置自动隐藏
    128.   autoHideTimeout = setTimeout(() => {
    129.     draggable.classList.add('hidden');
    130.     // 固定悬浮按钮位置
    131.     dragButton.style.top = '20px';
    132.     dragButton.style.right = '20px';
    133.     dragButton.style.display = 'block';
    134.   }, 5000); // 5秒后自动隐藏
    135. }
    136.  
    137. dragButton.addEventListener('click', () => {
    138.   draggable.classList.remove('hidden');
    139.   dragButton.style.display = 'none';
    140. });

    技术和原理分析：

    • HTML 结构：使用

    元素创建拖拽的固定位置容器和悬浮按钮，配合 CSS 控制其样式。

    • CSS 样式：定义了拖拽元素和悬浮按钮的基本样式，包括位置、背景色等，利用 transition 属性实现元素显示隐藏的动画效果。

    • JavaScript 交互：

    • 拖拽实现：通过 touchstart, touchmove, touchend, mousedown, mousemove, mouseup 等事件监听器，实现移动设备和桌面设备上的拖拽功能。在拖动过程中，更新拖拽元素的位置，并根据距离屏幕边缘的距离自动贴边。

    • 自动隐藏和按钮显示逻辑：利用 setTimeout 实现拖拽元素在一定时间内无操作后自动隐藏，并显示固定位置的悬浮按钮。点击悬浮按钮则重新显示拖拽元素。可以根据需要选择显示固定位置或者根据最后显示位置动态调整的悬浮按钮。

    最后完整代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6. <title>Draggable Fixed Div with Auto Hide and Floating Buttontitle>
    7. <style>
    8.   #draggable {
    9.     width: 200px;
    10.     height: 200px;
    11.     background-color: #ccc;
    12.     position: fixed;
    13.     top: 50px;
    14.     left: 50px;
    15.     touch-action: none; /* 禁止浏览器默认行为，如滚动 */
    16.     transition: transform 0.3s ease;
    17.   }
    18.  
    19.   #draggable.hidden {
    20.     transform: scale(0);
    21.     visibility: hidden;
    22.   }
    23.  
    24.   /* 默认固定悬浮按钮 */
    25.   #dragButton {
    26.     position: fixed;
    27.     bottom: 20px;
    28.     right: 20px;
    29.     background-color: #007bff;
    30.     color: white;
    31.     padding: 10px 20px;
    32.     cursor: pointer;
    33.   }
    34.  
    35.   /* 根据最后显示位置调整的悬浮按钮 */
    36.   /*
    37.   #dragButton.dynamic {
    38.     position: fixed;
    39.     background-color: #007bff;
    40.     color: white;
    41.     padding: 10px 20px;
    42.     cursor: pointer;
    43.     display: none;
    44.   }
    45.   */
    46. style>
    47. head>
    48. <body>
    49.  
    50. <div id="draggable">
    51.   <p>Drag me!p>
    52.   <button>Click mebutton>
    53. div>
    54.  
    55. <div id="dragButton" class="fixed">Showdiv>
    57.  
    58. <script>
    59.   const draggable = document.getElementById('draggable');
    60.   const dragButton = document.getElementById('dragButton');
    61.   let offsetX, offsetY;
    62.   let isDragging = false;
    63.   let autoHideTimeout;
    64.   let lastVisiblePosition = { top: 50, left: 50 }; // 初始位置
    65.  
    66.   // 触摸事件处理
    67.   draggable.addEventListener('touchstart', touchStart);
    68.   draggable.addEventListener('touchmove', touchMove);
    69.   draggable.addEventListener('touchend', touchEnd);
    70.  
    71.   // 鼠标事件处理
    72.   draggable.addEventListener('mousedown', mouseDown);
    73.   document.addEventListener('mousemove', mouseMove);
    74.   document.addEventListener('mouseup', mouseUp);
    75.  
    76.   draggable.classList.add('hidden');
    77.   
    78.   function touchStart(e) {
    79.     const touch = e.touches[0];
    80.     offsetX = touch.clientX - draggable.getBoundingClientRect().left;
    81.     offsetY = touch.clientY - draggable.getBoundingClientRect().top;
    82.     isDragging = true;
    83.   }
    84.  
    85.   function touchMove(e) {
    86.     if (!isDragging) return;
    87.  
    88.     e.preventDefault(); // 阻止默认的滚动行为
    89.  
    90.     const touch = e.touches[0];
    91.     let newX = touch.clientX - offsetX;
    92.     let newY = touch.clientY - offsetY;
    93.  
    94.     // 限制拖动范围在可视区域内
    95.     const maxX = document.documentElement.clientWidth - draggable.offsetWidth;
    96.     const maxY = document.documentElement.clientHeight - draggable.offsetHeight;
    97.     newX = Math.max(0, Math.min(newX, maxX));
    98.     newY = Math.max(0, Math.min(newY, maxY));
    99.  
    100.     draggable.style.left = `${newX}px`;
    101.     draggable.style.top = `${newY}px`;
    102.  
    103.     // 判断靠近边缘并自动贴边
    104.     if (newX < 10) {
    105.       draggable.style.left = '0';
    106.     } else if (newX > maxX - 10) {
    107.       draggable.style.left = `${maxX}px`;
    108.     }
    109.     if (newY < 10) {
    110.       draggable.style.top = '0';
    111.     } else if (newY > maxY - 10) {
    112.       draggable.style.top = `${maxY}px`;
    113.     }
    114.  
    115.     // 更新最后显示位置
    116.     lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };
    117.  
    118.     // 自动隐藏计时器重置
    119.     clearTimeout(autoHideTimeout);
    120.     draggable.classList.remove('hidden');
    121.     dragButton.style.display = 'none';
    122.   }
    123.  
    124.   function touchEnd() {
    125.     isDragging = false;
    126.  
    127.     // 设置自动隐藏
    128.     autoHideTimeout = setTimeout(() => {
    129.       draggable.classList.add('hidden');
    130.       // 固定悬浮按钮位置
    131.       dragButton.style.top = '20px';
    132.       dragButton.style.right = '20px';
    133.       dragButton.style.display = 'block';
    134.       // 动态悬浮按钮位置
    135.       /*
    136.       dragButton.classList.add('dynamic');
    137.       dragButton.style.top = `${lastVisiblePosition.top}px`;
    138.       dragButton.style.left = `${lastVisiblePosition.left}px`;
    139.       */
    140.     }, 5000); // 5秒后自动隐藏
    141.   }
    142.  
    143.   function mouseDown(e) {
    144.     offsetX = e.clientX - draggable.getBoundingClientRect().left;
    145.     offsetY = e.clientY - draggable.getBoundingClientRect().top;
    146.     isDragging = true;
    147.   }
    148.  
    149.   function mouseMove(e) {
    150.     if (!isDragging) return;
    151.  
    152.     e.preventDefault(); // 阻止默认的拖动行为
    153.  
    154.     let newX = e.clientX - offsetX;
    155.     let newY = e.clientY - offsetY;
    156.  
    157.     // 限制拖动范围在可视区域内
    158.     const maxX = document.documentElement.clientWidth - draggable.offsetWidth;
    159.     const maxY = document.documentElement.clientHeight - draggable.offsetHeight;
    160.     newX = Math.max(0, Math.min(newX, maxX));
    161.     newY = Math.max(0, Math.min(newY, maxY));
    162.  
    163.     draggable.style.left = `${newX}px`;
    164.     draggable.style.top = `${newY}px`;
    165.  
    166.     // 判断靠近边缘并自动贴边
    167.     if (newX < 10) {
    168.       draggable.style.left = '0';
    169.     } else if (newX > maxX - 10) {
    170.       draggable.style.left = `${maxX}px`;
    171.     }
    172.     if (newY < 10) {
    173.       draggable.style.top = '0';
    174.     } else if (newY > maxY - 10) {
    175.       draggable.style.top = `${maxY}px`;
    176.     }
    177.  
    178.     // 更新最后显示位置
    179.     lastVisiblePosition = { top: parseInt(draggable.style.top), left: parseInt(draggable.style.left) };
    180.  
    181.     // 自动隐藏计时器重置
    182.     clearTimeout(autoHideTimeout);
    183.     draggable.classList.remove('hidden');
    184.     dragButton.style.display = 'none';
    185.   }
    186.  
    187.   function mouseUp() {
    188.     isDragging = false;
    189.  
    190.     // 设置自动隐藏
    191.     autoHideTimeout = setTimeout(() => {
    192.       draggable.classList.add('hidden');
    193.       // 固定悬浮按钮位置      dragButton.style.right = '20px';
    194.       dragButton.style.display = 'block';
    195.       // 动态悬浮按钮位置
    196.       /*
    197.       dragButton.classList.add('dynamic');
    198.       dragButton.style.top = `${lastVisiblePosition.top}px`;
    199.       dragButton.style.left = `${lastVisiblePosition.left}px`;
    200.       */
    201.     }, 5000); // 5秒后自动隐藏
    202.   }
    203.  
    204.   dragButton.addEventListener('click', () => {
    205.     draggable.classList.remove('hidden');
    206.     dragButton.style.display = 'none';
    207.     // 动态悬浮按钮位置的显示控制
    208.     // dragButton.classList.remove('dynamic');
    209.   });
    210. script>
    211.  
    212. body>
    213. html>

    这篇博客文章介绍了如何利用 HTML、CSS 和 JavaScript 实现一个具有拖拽、自动隐藏和悬浮按钮的交互效果，适用于创建可定制的用户界面体验。

  • 相关阅读:
    【小程序】滚动到指定位置，支付宝小程序滚动位置不准确
    [Gcexcel]GrapeCity Documents Excel for Java 5.2.2
    MAC苹果电脑关闭系统完整性保护SIP
    航空机票预订系统项目结构化分析
    【JavaScript】JavaScript 运算符 ① ( 运算符分类 | 算术运算符 | 浮点数 的 算术运算 精度问题 )
    基础---nginx 启动不了，跟 Apache2 服务冲突
    尤雨溪：Vite的现状与未来展望
    ElasticSearch第三讲：ES详解 - Elastic Stack生态和场景方案
    如何将String转Date类型
    期货开户应该了解的行内知识
  • 原文地址：https://blog.csdn.net/waiter456/article/details/140943198