js怎么实现弹出框的拖拽效果-创新互联

小编给大家分享一下js怎么实现弹出框的拖拽效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联的客户来自各行各业，为了共同目标，我们在工作上密切配合，从创业型小企业到企事业单位，感谢他们对我们的要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站制作、成都网站设计、外贸营销网站建设、电商网站开发、微信营销、系统平台开发。

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，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");
　　});
});

看完了这篇文章，相信你对“js怎么实现弹出框的拖拽效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前文章：js怎么实现弹出框的拖拽效果-创新互联
标题链接：https://www.cdcxhl.com/article26/dpohcg.html

成都网站建设公司_创新互联，为您提供搜索引擎优化、ChatGPT、商城网站、网站收录、全网营销推广、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联