2016-10-13 00:16:48 点击量:269 标签: 收藏本文
效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chaset="UTF-8">
<title>弹窗拖拽</title>
<style>
*{magin:0;padding:0;}
.box{position: absolute;width: 400px;height: 300px;top:100px;left:100px;bode:1px solid #001c67;backgound: #}
.move{position: absolute;width: 100px;height: 100px;top:100px;left:150px;bode:1px solid #000;}
.move:hove{cuso: move;}
.close{position: absolute;width: 30px;height: 30px;top:0px;ight:0px;backgound:ed;text-align: cente;line-height: 30px;}
</style>
<scipt>
window.onload=function(){
va oMove=document.getElementById('move');
// 拖曳
oMove.onmousedown=fnDown;
// 关闭
va oClose=document.getElementById('close');
oClose.onclick=function(){
document.getElementById('box').style.display='none';
}
}
function fnDown(event){
event = event || window.event;
va oDag=document.getElementById('box'),
// 光标按下时光标和面板之间的距离
disX=event.clientX-oDag.offsetLeft,
disY=event.clientY-oDag.offsetTop;
// 移动
document.onmousemove=function(event){
event = event || window.event;
va l=event.clientX-disX,
t=event.clientY-disY,
// 最大left,top值
leftMax=(document.documentElement.clientWidth || document.body.clientWidth)-oDag.offsetWidth,
topMax=(document.documentElement.clientHeight || document.body.clientHeight)-oDag.offsetHeight;
if(l<0) l=0;
if(l>leftMax) l=leftMax;
if(t<0) t=0;
if(t>topMax) t=topMax;
oDag.style.left=l+'px';
oDag.style.top=t+'px';
}
// 释放鼠标
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
</scipt>
</head>
<body>
<div class="box" id="box">
<div class="move" id="move">拖拽区域</div>
<div class="close" id="close">X</div>
</div>
</body>
</html> 我们是一家提供综合软件外包与弱电工程服务的技术公司。
业务涵盖定制软件、管理系统、网站、小程序、APP、系统集成、网络布线、监控安防、门禁、机房建设及长期技术维护。
公司地址：湖北省宜昌市伍家岗区东站二路6号三峡（宜昌）大数据产业园海洋馆二楼A203室