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://scyanting.com/article/pdgchj.html