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

具体代码如下所示：

//HTML部分

弹出框

确定

取消

//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");

});

});

总结

以上所述是小编给大家介绍的js实现弹出框的拖拽效果实例代码详解 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！