原生JavaScript实现拖拽元素及窗口缩放效果

陈默

发布时间：2026-10-13 | 4人浏览过

原创

在Web前端开发中，基于鼠标的拖拽（Drag）不仅是基础交互，还能延伸出许多实用特效。本文将深入解析两个经典案例：一是拖动元素时保留原位置轮廓的视觉反馈，二是模拟窗口边缘进行大小调整的交互逻辑。

结果与目标

要实现上述效果，核心在于解决两个问题：第一，如何让被拖拽对象的原位显示“幽灵”般的边框或颜色；第二，如何通过相对容器内的子元素操作，改变父级容器的宽高尺寸。这需要准确计算鼠标坐标与元素偏移量之间的关系。

准备条件

HTML结构：需要具有明确 id 的元素，通常涉及一个作为触发点的控件和一个需要移动或被调整的主体容器。
CSS样式：被操作的对象必须设置 position: absolute，以便通过控制 left 和 top 属性改变其位置。同时需确保父级容器有明确的边界。
浏览器环境：所有现代标准浏览器均可支持以下 onmousedown、onmousemove 和 onmouseup 事件模型。

真实操作顺序

第1步：实现拖拽带框（Ghost Box）效果

目的：用户拖动物体时，原处保留一个同样大小的框体跟随鼠标，提升视觉指引感。

核心逻辑：创建一个临时的 div 作为“替身”，在鼠标按下瞬间生成并追加至文档流中，随鼠标移动而移动，松开时删除替身并更新原物体的最终坐标。

<html>
<head>
<style>
#div1 {width:100px; height:100px; background:yellow; position:absolute;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');
  oDiv.onmousedown=function (ev)
  {
    var oEvent=ev||event;
    // 计算鼠标点击点距离元素左上角的水平与垂直距离
    var disX=oEvent.clientX-oDiv.offsetLeft;
    var disY=oEvent.clientY-oDiv.offsetTop;

    // 创建替身元素
    var oNewDiv=document.createElement('div');
    oNewDiv.className='box';
    // 获取实际渲染宽度并减去边框像素(假设边框1px)
    oNewDiv.style.width=oDiv.offsetWidth-2+'px';
    oNewDiv.style.height=oDiv.offsetHeight-2+'px';
     
    oNewDiv.style.left=oDiv.offsetLeft+'px';
    oNewDiv.style.top=oDiv.offsetTop+'px';
    document.body.appendChild(oNewDiv);
    
    // 监听整个文档的移动事件
    document.onmousemove=function (ev)
    {
      var oEvent=ev||event;
      // 替身位置 = 当前鼠标位置 - 初始点击偏移
      oNewDiv.style.left=oEvent.clientX-disX+'px';
      oNewDiv.style.top=oEvent.clientY-disY+'px';
    };
    // 释放鼠标时清理替身，并将原元素移动到当前位置
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      document.body.removeChild(oNewDiv);
      oDiv.style.left=oNewDiv.style.left;
      oDiv.style.top=oNewDiv.style.top;
    };
  };
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

第2步：实现窗口/面板拖拽放大缩小效果

目的：模拟操作系统窗口右下角手柄的功能，按住该手柄拖动可实时拉伸内部面板的尺寸。

核心逻辑：在内部面板中嵌套一个小尺寸的触发器（如右下角图标）。监听该触发器的鼠标事件，但修改的是外部大容器（父级）的 style.width 和 style.height。

<html>
<head>
<style>
/* 触发器设为绝对定位，放置在父级右下角 */
#div1 {width:10px; height:10px; background:url(images/1.gif); position:absolute;bottom: 0;right: 0;}
/* 父级容器 */
#div2{width: 200px;height: 200px;position: relative;background: #ccc;}
.box{border: 1px solid black;position: absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
  var oTrigger=document.getElementById('div1');
   var oPanel=document.getElementById('div2');
  
  oTrigger.onmousedown=function (ev)
  {
    var oEvent=ev||event;
    // 注意：这里计算偏移是基于触发器相对于视口的坐标
    var disX=oEvent.clientX-oTrigger.offsetLeft;
    var disY=oEvent.clientY-oTrigger.offsetTop;

    var oNewDiv=document.createElement('div');
    // 同样创建替身以提供视觉跟随
    oNewDiv.style.width=oTrigger.offsetWidth+'px';
    oNewDiv.style.height=oTrigger.offsetHeight+'px';
     
    oNewDiv.style.left=oTrigger.offsetLeft+'px';
    oNewDiv.style.top=oTrigger.offsetTop+'px';
    document.body.appendChild(oNewDiv);
    
    document.onmousemove=function (ev)
    {
      var oEvent=ev||event;
      // 关键点：直接改变父级容器的宽度和高度
      oPanel.style.width=oEvent.clientX-disX+'px';
      oPanel.style.height=oEvent.clientY-disY+'px';
    };
    
    document.onmouseup=function ()
    {
      document.onmousemove=null;
      document.onmouseup=null;
      document.body.removeChild(oNewDiv);
      /* 
       注：此处仅做演示，实际场景中通常不需要将触发器坐标同步给父级，
       因为父级的宽高已更新完毕。
      */
    };
  };
};
</script>
</head>

<body>
<div id='div2'>
   <div id="div1"></div>
</div>
</body>
</html>