js实现弹出框的拖拽效果实例代码详解

//HTML部分<div class="wrap"></div><div class="popUpBox">　　<div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div></div>　　<div class="layer-body"></div>　　<div class="layer-footer">　　　　<div class="layer-footer-button-group">　　　　　　<div class="layer-footer-button layer-sure">确定</div>　　　　　　<div class="layer-footer-button layer-cancel">取消</div>　　　　</div>　　</div></div>//CSS部分.wrap {position: fixed;left: 0;top: 0;background-color: #000;z-index: 10000;  opacity: 0.3;}.popUpBox {　　height: 400px;　　width: 700px;　　position: absolute;　　overflow: hidden;　　box-sizing: border-box;　　z-index: 10000;　　background-color: #fff;　　border-radius: 2px;　　box-shadow: 1px 1px 50px rgba(0,0,0,.3);}.layer-head {　　width: 100%;　　height: 35px;　　border-bottom: 1px solid #eee;　　box-sizing: border-box;　　background-color: #f8f8f8;　　border-radius: 4px 4px 0 0;　　cursor: move;}.layer-head-text {　　padding-left: 20px;　　font-size: 14px;　　color: #333;　　height: 35px;　　line-height: 34px;　　float: left;}.layer-close {　　float: right;　　width: 16px;　　height: 16px;　　background-image: url(../images/close_hover.png);　　background-repeat:no-repeat;　　background-size:100% 100%;　　position: absolute;　　top: 10px;　　right: 12px;　　cursor: pointer;}.layer-body {　　width: 100%;　　height: calc(100% - 73px);}.layer-footer {　　width: 100%;　　height: 38px;　　border-top: 1px solid #eee;　　box-sizing: border-box;　　background-color: #f8f8f8;　　border-radius: 0 0 4px 4px;}.layer-footer-button-group {　　padding: 5px 0 5px 576px;　　height: 28px;}.layer-footer-button {　　width: 56px;　　height: 28px;　　line-height: 28px;　　margin-right: 6px;　　box-sizing: border-box;　　font-size: 12px;　　float: left;　　text-align: center;　　cursor: pointer;}.layer-sure {　　border: 1px solid #4898d5;　　background-color: #2e8ded;　　color: #fff;}.layer-cancel {　　border: 1px solid #dedede;　　background-color: #f1f1f1;　　color: #333;}//点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)$(document).on('mousedown', '.layer-head', function(e) {　　e = e || window.event; //兼容ie浏览器　　var drag = $(this).parent();　　$('body').addClass('select'); //webkit内核和火狐禁止文字被选中　　document.body.onselectstart = document.body.ondrag = function() { //ie浏览器禁止文字选中　　return false;}if ($(e.target).hasClass('layer-close')) { //点关闭按钮不能拖拽模态框　　return;}　　var diffX = e.clientX - drag.offset().left; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离　　var diffY = e.clientY - drag.offset().top;　　$(document).on('mousemove', function(e) {　　　　e = e || window.event; //兼容ie浏览器 　　　　var left = e.clientX - diffX; 　　　　var top = e.clientY - diffY;　　　　if (left < 0) { 　　　　　　left = 0; 　　　　} else if (left > window.innerWidth - drag.width()) { 　　　　　　left = window.innerWidth - drag.width(); 　　　　}　　　　if (top < 0) { 　　　　　　top = 0; 　　　　} else if (top > window.innerHeight - drag.height()){ 　　　　　　top = window.innerHeight - drag.height(); 　　　　}　　　　//移动时重新得到物体的距离，解决拖动时出现晃动的现象　　　　drag.css({　　　　　　'left': left + 'px',　　　　　　'top': top + 'px'　　　　});　　});　　$(document).on('mouseup', function(e) { //当鼠标弹起来的时候不再移动 　　　　$(document).unbind("mousemove");　　　　$(document).unbind("mouseup");　　});});