//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实现弹出框的拖拽的更多相关文章

  1. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  2. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  3. js 常见弹出框学习

    模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...

  4. 【原创】贡献一个JS的弹出框代码...

    一.前言 最近在做一个项目,自己感觉系统自带的alert()方法的弹出框实在是不堪入目,所以在网上找了一些资料,然后自己加工了一下,做出了自己的一个js弹出框,在这里贡献出来,希望对你有帮助. 二.开 ...

  5. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  6. jsp + js + 前端弹出框

    在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...

  7. js swal()弹出框

    做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...

  8. js实现弹出框跟随鼠标移动

    又是新的一天网上冲浪,在bing的搜索页面下看到这样一个效果: 即弹出框随着鼠标的移动而移动.思路大概为: 调用onmousemove函数,将鼠标的当前位置赋予弹出框即可 //html <div ...

  9. EasyUI, Dialog 在框架页(ifrmae)的Top页面弹出时,拖拽Dialog边缘(以改变窗口大小),UI界面被卡死的解决办法

    将Dialog的modal属性设置为true,可以解决卡死的问题(但会给用户使用体验带来影响) var par = { title: This.title, width: This.width, he ...

随机推荐

  1. ios 为什么拖拽的控件为weak 手写的strong

    ib拖拽的控件自动声明为weak  而平时自己手写的为strong 在ios中,对象默认都是强引用,不是强引用赋值后会立即释放 ib声明weak 不立即被释放 简单说就是 1.声明的弱引用指向强引用 ...

  2. Android屏幕适配工具

    这里需要用到一个jar包,下载拿到这个jar包后直接双击就可以生成市场大部分主流屏幕尺寸了.然后只要把生成好的xml尺寸文件拷贝到相应的value文件中即可.很方便,以后再也不用担心适配繁琐的问题了. ...

  3. 多个raq导出一个excel2007中

     需求描述:         客户以前通过润乾API把多个raq模板数据来导出到一个excel文件中,由于现在数据量过大一个raq数据就超过了65535,原来的2003接口已经满足不了现在的需求, ...

  4. 签署您的应用--手动签署 APK

    签署您的应用 本文内容 证书和密钥库 签署您的调试构建 调试证书的有效期 管理您的密钥 使用 Google Play 应用签名 自行管理您的密钥和密钥库 签署 APK 生成密钥和密钥库 手动签署 AP ...

  5. C#中的三种timer

    转 https://blog.csdn.net/hoiven/article/details/51362582 如果你需要使用规律的时间间隔重复执行一些方法,最简单的方式是使用定时器(timer). ...

  6. c# 设计模式 之:装饰模式

    一.引言 在软件开发中,我们经常想要对一类对象添加不同的功能,例如要给手机添加贴膜,手机挂件,手机外壳等,如果此时利用继承来实现的话,就需要定义无数的类,如StickerPhone(贴膜是手机类).A ...

  7. 在 Linux 上创建虚拟机规模集和部署高度可用的应用

    利用虚拟机规模集,可以部署和管理一组相同的.自动缩放的虚拟机. 可以手动缩放规模集中的 VM 数,也可以定义规则,以便根据资源使用情况(如 CPU 使用率.内存需求或网络流量)进行自动缩放. 在本教程 ...

  8. mysql(5.7.17)字符集设置(character_set/collation)

    0 查看字符集(character_set/collation) use information_schema;desc tables;    --一定记住tables表,information_sc ...

  9. 使用最新版SDWebImage

    使用最新版SDWebImage 1. 下载源码: 2. 测试能否编译成功: 3. 用Xcode6新建一个工程,然后将文件夹拖入到工程当中: 4. 查看其主要的源码,发现之前使用版本的方法都被弃用了: ...

  10. Linux系统优化实现高并发

    ulimit -SHn 65535内核优化net.ipv4.ip_forward = 1            #开启路由功能net.ipv4.conf.default.rp_filter = 1   ...