拖拽案例

注册信息 【关闭】

  </div>
  <script>
      var id=document.getElementById("dd");
      var drop=document.getElementById("drop");
      drop.onmousedown = function(e) {
          //当鼠标按下的时候，求鼠标在盒子中的位置
          //鼠标在盒子中的位置=鼠标在页面上的位置-盒子的位置
          var x=e.pageX-id.offsetLeft;
          var y=e.pageY-id.offsetTop;
         // 鼠标在文档中移动的时候，求盒子的坐标
         // 盒子的坐标=鼠标当前在页面中的位置-鼠标在盒子中的位置
           document.onmousemove=function(e) {
          
         
             var idx=e.pageX-x;
             var idy=e.pageY-y;
             id.style.left=idx+'px';
             id.style.top= idy+'px';
            }
        //当鼠标弹起的时候，移除事件
        document.onmouseup=function(){
            document.onmousemove = null;
        }
        //点击关闭按钮，移除盒子
        var  close=document.getElementById("close");
        close.onclick = function(){
            dd.style.display="none";
        }


      }
  </script>