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 变量基础知识
Nov 07 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
浏览器窗口加载和大小改变事件示例
Feb 27 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
小程序微信支付功能配置方法示例详解【基于thinkPHP】
2019/05/05 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
JS集成fckeditor及判断内容是否为空的方法
2016/05/27 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
自我评价如何写好?
2014/01/05 职场文书
财务部岗位职责
2015/02/03 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
5人制售《绝地求生》游戏外挂获利500多万元 被判刑
2022/03/31 其他游戏
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server