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动态添加删除select项(实现代码)
Sep 03 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
Vue关于数据绑定出错解决办法
May 15 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 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自动更新新闻DIY
2006/10/09 PHP
我的论坛源代码(四)
2006/10/09 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
ie 7/8不支持trim的属性的解决方案
2014/05/23 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
javascript实现时钟动画
2020/12/03 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
巴西购物网站:Estrela10
2018/12/13 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
会计毕业生求职简历的自我评价
2013/10/20 职场文书
员工聘用合同范本
2015/09/21 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python