传统拖着方式第一篇

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>传统拖拽</title>
   <style type="text/css">
    #dialog{
        position: relative;
        width: 200px;
        top:50px;
        left:100px;
    }
    #title{
        width: 100%;
        height:50px;
        background:#D7DEF0;
        line-height: 50px;
        text-align: center;
        cursor:move;
    }
    .content{
        width: 100%;
        height:200px;
        background: #F0F0F0;
    }
</style>
<script src="js/jquery-1.10.1.js"></script>
</head>
<body>
   <div id="dialog" >
       <div id="title"></div>
       <div class="content"></div>
   </div>
   <script type="text/javascript">
       $(document).ready(function(){
    var isMouseDown=false;
    var lastPoint={};
    $("#title").on("mousedown",function(e){
       isMouseDown=true;
       lastPoint.x=e.pageX;
       lastPoint.y=e.pageY;
    }).on("mousemove",function(e){
      if(isMouseDown){
         var dialog=$("#dialog");//获得整个模态框
         var targetX=parseInt(dialog.css("left"))+e.pageX-lastPoint.x;
         var targetY=parseInt(dialog.css("top"))+e.pageY-lastPoint.y;
         //将目标坐标的值给整个框的left,top
         dialog.css("left",targetX+"px");
         dialog.css("top",targetY+"px");
         //更新坐标
         lastPoint.x=e.pageX;
         lastPoint.y=e.pageY;
      }
    }).on("mouseup",function(){//松开鼠标按钮的事件
       isMouseDown=false;
       lastPoint={};
    });
});
   </script>
</body>
</html>

传统拖着方式第一篇

猜你喜欢