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部分

 

//点击某物体时，用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");

　　});

});