原生js实现自由拖拽弹窗代码demo
更新时间：2016年06月29日 16:54:43 投稿：lijiao
这篇文章主要为大家详细介绍了原生js实现弹窗拖拽代码demo，以及在实现js弹窗拖拽效果需要注意的事项，感兴趣的小伙伴们可以参考一下
本文为大家分享了原生弹窗拖拽代码demo，供大家参考，具体内容如下
效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹窗拖拽</title>
<style>
*{margin:0;padding:0;}
.box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;border:1px solid #001c67;background: #}
.move{position: absolute;width: 100px;height: 100px;top:100px;left:150px;border:1px solid #000;}
.move:hover{cursor: move;}
.close{position: absolute;width: 30px;height: 30px;top:0px;right:0px;background:red;text-align: center;line-height: 30px;}
</style>
<script>
window.onload=function(){
var oMove=document.getElementById('move');
// 拖曳
oMove.onmousedown=fnDown;
// 关闭
var oClose=document.getElementById('close');
oClose.onclick=function(){
document.getElementById('box').style.display='none';
}
}
function fnDown(event){
event = event || window.event;
var oDrag=document.getElementById('box'),
// 光标按下时光标和面板之间的距离
disX=event.clientX-oDrag.offsetLeft,
disY=event.clientY-oDrag.offsetTop;
// 移动
document.onmousemove=function(event){
event = event || window.event;
var l=event.clientX-disX,
t=event.clientY-disY,
// 最大left,top值
leftMax=(document.documentElement.clientWidth || document.body.clientWidth)-oDrag.offsetWidth,
topMax=(document.documentElement.clientHeight || document.body.clientHeight)-oDrag.offsetHeight;
if(l<0) l=0;
if(l>leftMax) l=leftMax;
if(t<0) t=0;
if(t>topMax) t=topMax;
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
// 释放鼠标
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
</script>
</head>
<body>
<div class="box" id="box">
<div class="move" id="move">拖拽区域</div>
<div class="close" id="close">X</div>
</div>
</body>
</html>
主要注意几点：
1.event，IE兼容问题
2.点击鼠标时要先判断鼠标与面板之间的距离
3.要判断弹窗与浏览器整个区域的距离，不能让弹窗跑出浏览器外的区域
4.松开鼠标要解除事件绑定，不然会有bug
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了微信小程序Echarts覆盖正常组件问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
这篇文章主要向大家分享如何在fckeditor编辑器插入代码操作，这里脚本之家小编就为大家分享一下啊2007-05-05
这篇文章主要介绍了如何在CocosCreator中做一个List，对List列表感兴趣的同学，不妨来试验一下2021-04-04
在web中如想要获取用户计算机上的文件我们通常会用到的方法是通过一个表单元素<input type="file">操作用户选择的文件,本文小编给大家介绍了JS获取本地文件并进行网络传输的方法,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了微信小程序项目实践之主页tab选项实现,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JavaScript异步加载浅析,本文讲解了脚本延迟执行、脚本的完全并行化、可编程的脚本加载等内容,需要的朋友可以参考下2014-12-12
这篇文章主要为大家介绍了JS前端一千万条弹幕数据循环优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
JavaScript判断一个输入量是否为电话号码，通过正则表达式实现,需要的朋友可以参考下2014-03-03
JavaScript+Java实现HTML页面转为PDF文件保存的方法
借助iText这个Java库,我们可以将HTML文件保存为图片文件进而转换成PDF格式,接下来就来具体看下JavaScript+Java实现HTML页面转为PDF文件保存的方法2016-05-05
JavaScript 数据响应是一种重要的前端开发概念,是指在应用程序中的数据发生变化时,能够自动更新与这些数据相关的用户界面（UI）部分的能力,本文我们来总结一下目前可以简单实现 JavaScript 中的数据响应的方法,需要的朋友可以参考下2023-09-09
最新评论