JS实现拖拽弹出框的效果

实现效果

代码

HTML

   <!-- 鼠标拖拽特效S -->
      <h1>可拖拽特效</h1>
      <div class="tz_nav">
        <a href="javascript:;" id="register">注册信息</a>
      </div>
      <div class="tz_d_box" id="d_box">
        <div class="hd" id="drop">
          注册信息（可拖拽）
          <span id="box_close">[关闭]</span>
        </div>
        <div class="bd"></div>
      </div>
      <!-- 鼠标拖拽特效E -->

CSS

/* 鼠标拖拽效果S */
.tz_d_box {
  width: 400px;
  height: 300px;
  border: 5px solid #eee;
  box-shadow: 2px 2px 2px 2px #666;
  position: absolute;
}

.hd {
  width: 100%;
  height: 25px;
  background-color: #7c9299;
  border-bottom: 1px solid #31406e;
  line-height: 25px;
  color: white;
  cursor: move;
}
/* 鼠标拖拽效果E */

js

// 鼠标拖拽特效S
var d_box = document.getElementById("d_box");
var drop = document.getElementById("drop");
// 鼠标在滚动条上按下 可以拖拽，鼠标移动盒子也动
drop.onmousedown = function (event) {
    var event = event || window.event;
    // 获取鼠标在页面的位置
    var pageX = event.pageX || event.clientX + documentElement.scrolLeft;
    var pageY = event.pageY || event.clientY + documentElement.scrolTop;
    // 获取鼠标按下的一瞬间在盒子中的位置
    var boxX = pageX - d_box.offsetLeft;
    var boxY = pageY - d_box.offsetTop;

    document.onmousemove = function (event) {
        var event = event || window.event;
        // 鼠标在页面的位置
        var pageX = event.pageX || event.clientX + documentElement.scrolLeft;
        var pageY = event.pageY || event.clientY + documentElement.scrolTop;
        // 让个盒子跟着鼠标移动
        d_box.style.left = pageX - boxX + "px";
        d_box.style.top = pageY - boxY + "px";
    };
};
// 鼠标移开，盒子不跟着
document.onmouseup = function () {
    document.onmousemove = null
}
// 鼠标拖拽特效E