//HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">彈出框</div><div class="layer-close"></div> ...
//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>
.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"); }); });
