月眸


js实现弹出框拖拽

毛毛小妖 2019-11-11 68浏览 0条评论
首页/ 正文
分享到: / / / /
$(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");
  });
});

 

最后修改:2019-11-11 15:46:56 © 著作权归作者所有
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

上一篇

发表评论

评论列表

还没有人评论哦~赶快抢占沙发吧~