JQuery 实现弹出窗自由移动

var HTSDK = window.HTSDK || {};

HTSDK.infor={

     //拖拽

     dragAndDrop:function(){

          var _move=false;

          //鼠标离控件左上角的相对位置

          var _x,

               _y;

               $(".wTop").mousedown(function(e){

                    _move = true;

                    _x = e.pageX-parseInt($(".win").css("left"));

                    _y = e.pageY-parseInt($(".win").css("top"));

               });

               $(document).mousemove(function(e){

                    if(_move){

                         var x = e.pageX-_x;//移动时鼠标位置计算控件左上角的绝对位置

                         var y = e.pageY-_y;

                              $(".win").css({top:y,left:x});//控件新位置

                              }

                         }).mouseup(function(){

                         _move = false;

                    });

     },

     //初始化拖拽div的位置

     initPosition:function(){

          //计算初始化位置

          var itop = ($(document).height()-$(".win").height())/2;

          var ileft = ($(document).width()-$(".win").width())/1.2;

          //设置被拖拽div的位置

          $(".win").css({top:itop,left:ileft});

     },

     //点击显示按钮

     clickShowBtn:function(){

          $("#show").click(function(){

               $(".win").show();

          });

          $("#hidden").click(function(){

               $(".win").hide();

          });

     },

     //入口

     init:function(){

          var _ts = this;

               _ts.clickShowBtn();

               _ts.initPosition();

               _ts.dragAndDrop();

     }

};

$(function(){

     HTSDK.infor.init();

});

HTML 结构

     <button id="show">显示</button>
     <div class="win">
          <div class="wTop"><p style=" cursor: pointer;float:right;margin:5px 5px 0px 0px;color:white" id="hidden">X</p></div>
          <div class="content"></div>
     </div>

转载于:https://www.cnblogs.com/zengcanxin/p/5269572.html