网络编程 
首页 > 网络编程 > 浏览文章

js实现弹出框的拖拽效果实例代码详解

(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )

具体代码如下所示:

//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实现弹出框的拖拽效果实例代码详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

上一篇:js实现删除li标签一行内容
下一篇:重学 JS:为啥 await 不能用在 forEach 中详解
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap