js怎么实现弹出框的拖拽效果-创新互联
小编给大家分享一下js怎么实现弹出框的拖拽效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
创新互联的客户来自各行各业,为了共同目标,我们在工作上密切配合,从创业型小企业到企事业单位,感谢他们对我们的要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。专业领域包括成都网站制作、成都网站设计、外贸营销网站建设、电商网站开发、微信营销、系统平台开发。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怎么实现弹出框的拖拽效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:js怎么实现弹出框的拖拽效果-创新互联
当前路径:http://myzitong.com/article/dpohcg.html