取消
//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:1px1px50pxrgba(0,0,0,.3);
}
.layer-head{
width:100%;
height:35px;
border-bottom:1pxsolid#eee;
box-sizing:border-box;
background-color:#f8f8f8;
border-radius:4px4px00;
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:1pxsolid#eee;
box-sizing:border-box;
background-color:#f8f8f8;
border-radius:004px4px;
}
.layer-footer-button-group{
padding:5px05px576px;
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:1pxsolid#4898d5;
background-color:#2e8ded;
color:#fff;
}
.layer-cancel{
border:1pxsolid#dedede;
background-color:#f1f1f1;
color:#333;
}
//点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
$(document).on('mousedown','.layer-head',function(e){
e=e||window.event;//兼容ie浏览器
vardrag=$(this).parent();
$('body').addClass('select');//webkit内核和火狐禁止文字被选中
document.body.onselectstart=document.body.ondrag=function(){//ie浏览器禁止文字选中
returnfalse;
}
if($(e.target).hasClass('layer-close')){//点关闭按钮不能拖拽模态框
return;
}
vardiffX=e.clientX-drag.offset().left;//鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
vardiffY=e.clientY-drag.offset().top;
$(document).on('mousemove',function(e){
e=e||window.event;//兼容ie浏览器
varleft=e.clientX-diffX;
vartop=e.clientY-diffY;
if(left<0){
left=0;
}elseif(left>window.innerWidth-drag.width()){
left=window.innerWidth-drag.width();
}
if(top<0){
top=0;
}elseif(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实现弹出框的拖拽效果实例代码详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
