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


Posted in Javascript onApril 16, 2019

具体代码如下所示:

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

Javascript 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
简单实现js页面切换功能
Jan 10 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 #Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 #Javascript
详解JavaScript中的强制类型转换
Apr 15 #Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 #Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 #Javascript
ES6知识点整理之模块化的应用详解
Apr 15 #Javascript
详解如何运行vue项目
Apr 15 #Javascript
You might like
个人站长制做网页常用的php代码
2007/03/03 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
PHP使用反向Ajax技术实现在线客服系统详解
2019/07/01 PHP
jquery.validate使用攻略 第一部
2010/07/01 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
js实现分割上传大文件
2016/03/09 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
python实现的解析crontab配置文件代码
2014/06/30 Python
详解Python中类的定义与使用
2017/04/11 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
django 外键model的互相读取方法
2018/12/15 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python实现简单图书管理系统
2019/11/22 Python
利用python如何实现猫捉老鼠小游戏
2020/12/04 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
一道输出判断型Java面试题
2014/10/01 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
大专毕业生简历的自我评价
2013/10/20 职场文书
授权委托书协议书
2014/10/16 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
Python采集壁纸并实现炫轮播
2022/04/30 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python