前端开发：创建可拖动的固定位置 `＜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 实现一个具有拖拽、自动隐藏和悬浮按钮的交互效果，适用于创建可定制的用户界面体验。

猜你喜欢

目录

热门文章