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 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
XmlUtils JS操作XML工具类
Oct 01 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
判断横屏竖屏(三种)
Feb 13 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
PHP7新特性简述
Jun 11 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
Vue-路由导航菜单栏的高亮设置方法
Mar 17 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php模拟post提交数据的方法
2015/02/12 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
php封装的smarty类完整实例
2016/10/19 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python中字典的基本知识初步介绍
2015/05/21 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python 的内置字符串方法小结
2016/03/15 Python
python距离测量的方法
2018/03/06 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
机电专业毕业生求职信
2013/10/27 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
化工操作工岗位职责
2014/04/29 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
路政管理求职信
2014/06/18 职场文书
2014年仓库工作总结
2014/11/20 职场文书
晚会闭幕词
2015/01/28 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL