宜宾网站建设公司

js怎么实现弹出框的拖拽效果

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

创新互联主营和平网站建设的网络公司,主营网站建设方案,APP应用开发,和平h5成都微信小程序搭建,和平网站营销推广欢迎和平等地区企业咨询

js有什么特点

1、js属于一种解释性脚本语言；2、在绝大多数浏览器的支持下，js可以在多种平台下运行，拥有着跨平台特性；3、js属于一种弱类型脚本语言，对使用的数据类型未做出严格的要求，能够进行类型转换，简单又容易上手；4、js语言安全性高，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失；5、基于对象的脚本语言，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怎么实现弹出框的拖拽效果”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！


新闻名称：js怎么实现弹出框的拖拽效果
文章源于：http://hbruida.cn/article/pdgchj.html

其他资讯