#摘要
这是一套最简洁、最稳定、可直接复制运行的原生 JS 拖拽实现，包含完整事件 + 样式 + 逻辑，不用任何框架。
#要准备的核心知识点
**自由拖拽**：用 mousedown + mousemove + mouseup 实现
**HTML5 标准拖拽**：用 dragstart / drag / dragend
**必须设置 position**: absolute 才能自由移动
* /偏移量计算是不抖动的关键/ 

##完整代码（HTML + CSS + JS）
###简单示例
```html
<!DOCTY<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>原生JS拖拽</title>
  <style>
    .drag-box {
      width: 150px;
      height: 150px;
      background: #409eff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      cursor: move;
      position: absolute;
      user-select: none;
    }
  </style>
</head>
<body>
  <div class="drag-box" id="dragBox">可拖拽</div>

  <script>
    const box = document.getElementById('dragBox');
    
    let isDragging = false;
    let offsetX, offsetY;

    // ========== 拖拽核心事件 ==========
    // 1. 鼠标按下
    box.addEventListener('mousedown', (e) => {
      isDragging = true;
      // 计算鼠标相对于元素左上角的偏移
      offsetX = e.clientX - box.offsetLeft;
      offsetY = e.clientY - box.offsetTop;
      box.style.opacity = '0.8';
    });

    // 2. 鼠标移动
    document.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      // 实时设置位置
      box.style.left = e.clientX - offsetX + 'px';
      box.style.top = e.clientY - offsetY + 'px';
    });

    // 3. 鼠标松开 / 离开页面
    document.addEventListener('mouseup', () => {
      isDragging = false;
      box.style.opacity = '1';
    });
  </script>
</body>
</html>
```
###复杂拖拽示例
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>进阶拖拽：边界+吸附+排序+跨区域拖放</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      padding: 20px;
      display: flex;
      gap: 30px;
    }

    /* 容器通用样式 */
    .container {
      width: 320px;
      height: 500px;
      border: 2px solid #333;
      position: relative;
      overflow: hidden;
      background: #f9f9f9;
    }

    /* 自由拖拽盒子 */
    .drag-item {
      width: 120px;
      height: 50px;
      background: #409eff;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      cursor: move;
      position: absolute;
      user-select: none;
      transition: all 0.2s ease;
      z-index: 999;
    }

    /* 拖拽中样式 */
    .dragging {
      opacity: 0.7;
      transform: scale(1.05);
    }

    /* 拖拽排序列表 */
    .sort-list {
      width: 100%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* 排序项 */
    .sort-item {
      padding: 12px;
      background: #67c23a;
      color: white;
      border-radius: 4px;
      cursor: move;
      user-select: none;
      transition: all 0.2s;
    }

    /* 排序占位空白 */
    .sort-placeholder {
      height: 48px;
      background: #e6f7ff;
      border: 1px dashed #409eff;
      border-radius: 4px;
      margin: 4px 0;
    }
  </style>
</head>
<body>
  
  <div class="container" id="freeContainer">
    <div class="drag-item" id="freeDrag">自由拖拽<br>边界+吸附</div>
  </div>

  
  <div class="container" id="sortContainer">
    <div class="sort-list" id="sortList">
      <div class="sort-item" draggable="true">可拖拽排序项 1</div>
      <div class="sort-item" draggable="true">可拖拽排序项 2</div>
      <div class="sort-item" draggable="true">可拖拽排序项 3</div>
      <div class="sort-item" draggable="true">可拖拽排序项 4</div>
    </div>
  </div>

  <script>
    // ==============================================
    // 1. 自由拖拽 + 边界限制 + 边缘吸附
    // ==============================================
    const freeDrag = document.getElementById('freeDrag');
    const freeContainer = document.getElementById('freeContainer');
    let isDrag = false, offsetX, offsetY;

    freeDrag.addEventListener('mousedown', (e) => {
      isDrag = true;
      freeDrag.classList.add('dragging');
      offsetX = e.clientX - freeDrag.offsetLeft;
      offsetY = e.clientY - freeDrag.offsetTop;
      e.preventDefault();
    });

    document.addEventListener('mousemove', (e) => {
      if (!isDrag) return;

      // 计算位置
      let left = e.clientX - offsetX;
      let top = e.clientY - offsetY;

      // ========== 边界限制：不超出父容器 ==========
      const maxLeft = freeContainer.clientWidth - freeDrag.offsetWidth;
      const maxTop = freeContainer.clientHeight - freeDrag.offsetHeight;
      left = Math.max(0, Math.min(left, maxLeft));
      top = Math.max(0, Math.min(top, maxTop));

      // ========== 边缘吸附（距离<20px自动贴边） ==========
      const absorbDistance = 20;
      if (left < absorbDistance) left = 0;
      if (top < absorbDistance) top = 0;
      if (maxLeft - left < absorbDistance) left = maxLeft;
      if (maxTop - top < absorbDistance) top = maxTop;

      freeDrag.style.left = left + 'px';
      freeDrag.style.top = top + 'px';
    });

    document.addEventListener('mouseup', () => {
      if (isDrag) {
        isDrag = false;
        freeDrag.classList.remove('dragging');
      }
    });

    // ==============================================
    // 2. 拖拽排序 + 跨区域拖放
    // ==============================================
    const sortList = document.getElementById('sortList');
    let dragSortItem = null;

    // 开始拖拽
    sortList.addEventListener('dragstart', (e) => {
      if (e.target.classList.contains('sort-item')) {
        dragSortItem = e.target;
        setTimeout(() => dragSortItem.classList.add('dragging'), 0);
      }
    });

    // 结束拖拽
    sortList.addEventListener('dragend', () => {
      dragSortItem?.classList.remove('dragging');
      dragSortItem = null;
      document.querySelectorAll('.sort-placeholder').forEach(el => el.remove());
    });

    // 拖拽经过 & 排序逻辑
    sortList.addEventListener('dragover', (e) => {
      e.preventDefault();
      if (!dragSortItem) return;

      const afterElement = getDragAfterElement(sortList, e.clientY);
      const placeholder = document.createElement('div');
      placeholder.classList.add('sort-placeholder');

      if (!afterElement) {
        sortList.appendChild(placeholder);
      } else {
        sortList.insertBefore(placeholder, afterElement);
      }
    });

    // 放置
    sortList.addEventListener('drop', (e) => {
      e.preventDefault();
      if (!dragSortItem) return;
      const placeholder = document.querySelector('.sort-placeholder');
      if (placeholder) {
        sortList.insertBefore(dragSortItem, placeholder);
        placeholder.remove();
      }
    });

    // 计算拖拽位置（辅助函数）
    function getDragAfterElement(container, y) {
      const items = [...container.querySelectorAll('.sort-item:not(.dragging)')];
      return items.reduce((closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;
        if (offset < 0 && offset > closest.offset) {
          return { offset: offset, element: child };
        } else {
          return closest;
        }
      }, { offset: Number.NEGATIVE_INFINITY }).element;
    }
  </script>
</body>
</html>
```

这是一套最简洁、最稳定、可直接复制运行的原生 JS 拖拽实现，包含完整事件 + 样式 + 逻辑，不用任何框架。

js原生拖拽事件

编程语言

原生JS实现拖拽功能教程，包含基础拖拽、边界限制、边缘吸附、拖拽排序和跨区域拖放等完整实现方案。无需框架，直接复制代码即可运行，适合前端开发者学习拖拽交互开发。

容器

HTML5

2026采购季 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

js原生拖拽事件-腾讯云开发者社区-腾讯云

js原生拖拽事件

js原生拖拽事件

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐