JavaScript 实现百度风格登录窗口拖拽功能

作者：窗边听雨

时间：2026-10-23

本文介绍如何利用 JavaScript 实现类似百度登录窗口的拖拽效果。通过监听鼠标按下、移动和抬起事件，结合元素绝对定位属性，动态计算并更新窗口位置，从而完成交互式拖拽功能的开发。

文章目录

前言与背景

前言

在使用百度相关功能网页时，通常需要登录账号。你是否注意到百度登录窗口具备拖拽功能？下文将分享实现该效果的源码。

代码实现


<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #box{
  width: 200px;
  height: 200px;
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: red;
  }
 </style>
 </head>
 <body>
 <div id="box"></div>
 <script type="text/javascript">
  var oBox = document.getElementById("box")
  // 鼠标按下事件
  oBox.onmousedown = function(ev){
  var ev = ev || event
  var difX = ev.clientX - oBox.offsetLeft
  var difY = ev.clientY - oBox.offsetTop
  // 紧接着需要马上去移动鼠标
  oBox.onmousemove = function(ev){
   // 这里的ev和onmousedown里面的ev不一样
   var ev = ev || event
   var oBox_left = ev.clientX - difX
   var oBox_top = ev.clientY - difY
   oBox.style.left = oBox_left + "px"
   oBox.style.top = oBox_top + "px"
  }
  // 当鼠标抬起时不要移动
  oBox.onmouseup = function(){
   oBox.onmousemove = null
  }
  }
 </script>
 </body>
</html>