网站开发 发送邮件功能,HTML与wordpress兼容,北京网上申请营业执照,东莞现在属于什么风险地区在前端开发中#xff0c;实现一个可拖动的固定位置 div#xff0c;并且根据拖动的状态控制其显示和隐藏#xff0c;同时在特定条件下显示悬浮按钮#xff0c;涉及以下技术和原理#xff1a;
技术细节和实现步骤#xff1a;
1. HTML 结构#xff1a;
!DOC…在前端开发中实现一个可拖动的固定位置 div并且根据拖动的状态控制其显示和隐藏同时在特定条件下显示悬浮按钮涉及以下技术和原理
技术细节和实现步骤
1. HTML 结构
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDraggable Fixed Div with Auto Hide and Floating Button/title
style/* CSS 样式定义拖拽元素和悬浮按钮的样式 */
/style
/head
body!-- 拖拽的固定位置的 div --
div iddraggablepDrag me!/pbuttonClick me/button
/div!-- 默认显示的悬浮按钮 --
div iddragButtonShow/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 langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleDraggable 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
bodydiv iddraggablepDrag me!/pbuttonClick me/button
/divdiv iddragButton classfixedShow/div
!-- div iddragButton classdynamicShow/div --scriptconst 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 实现一个具有拖拽、自动隐藏和悬浮按钮的交互效果适用于创建可定制的用户界面体验。
