JaScript实现拖拽功能的完整代码_jascript交互

技术教程
2025-10-30 11:36:02

答案：通过监听mousedown、mousemove和mouseup事件，结合getBoundingClientRect计算偏移，实现元素拖拽；代码包含HTML、CSS和J*aScript完整结构，支持鼠标按下开始拖动、移动更新位置、松开结束拖拽，并提供全局事件监听与视觉反馈优化。

javascript实现拖拽功能的完整代码_javascript交互

实现拖拽功能在网页开发中很常见，比如拖动元素调整位置、排序或窗口移动等。下面是一个完整的 J*aScript 拖拽功能实现示例，包含 HTML、CSS 和 J*aScript 代码，适用于大多数现代浏览器。

1. 基本原理

拖拽的核心是监听三个事件：

国洋商务通

Gyb2b V1.01免费版可终身使用,是一款功能强大的B2B电子商务应用软件。该软件不仅更新和修改了V1.0相关功能，更是采用了目前互联网上最流行的LAMP组合（Linux+Apache+Mysql+PHP）开发完成，模板技术实现了界面与代码的有效分离，用户可以快速地在此基础上编译模板；提供B2B电子商务应用最常见的求购、供应、商品、公司库、行业资讯、商圈、资信认证、在线交易、交易评分、留言、搜

0 查看详情国洋商务通

mousedown：鼠标按下时记录初始位置和元素偏移
mousemove：鼠标移动时实时更新元素位置
mouseup：鼠标松开时结束拖拽，移除移动监听

2. 完整可运行代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>J*aScript 拖拽功能实现</title>
  <style>
    #drag-box {
      width: 100px;
      height: 100px;
      background-color: #4CAF50;
      color: white;
      text-align: center;
      line-height: 100px;
      position: absolute;
      cursor: move;
      user-select: none;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
  </style>
</head>
<body>
  <div id="drag-box">拖我</div>
<p><script>
const dragBox = document.getElementById('drag-box');</p><pre class='brush:php;toolbar:false;'>let isDragging = false;
let offsetX, offsetY;

// 鼠标按下
dragBox.addEventListener('mousedown', function(e) {
  isDragging = true;

  // 计算鼠标相对于元素左上角的偏移
  offsetX = e.clientX - dragBox.getBoundingClientRect().left;
  offsetY = e.clientY - dragBox.getBoundingClientRect().top;

  // 添加全局监听，防止鼠标移出元素时丢失
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

// 鼠标移动
function onMouseMove(e) {
  if (!isDragging) return;

  // 计算新位置（减去偏移量）
  const newX = e.clientX - offsetX;
  const newY = e.clientY - offsetY;

  // 更新元素位置
  dragBox.style.left = newX + 'px';
  dragBox.style.top = newY + 'px';
}

// 鼠标松开
function onMouseUp() {
  isDragging = false;
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}