js实现弹出框拖拽
网站首页 文章专栏 js实现弹出框拖拽
js实现弹出框拖拽
编辑时间:2019-11-11 15:46 作者:毛毛小妖 浏览量:176 评论数: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");
  });
});

 

来说两句吧
验证码:
最新评论
    还没有人评论哦,快来坐沙发吧!