<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0}
#main{
position: absolute;
width: 260px;
height: 260px;
background: antiquewhite;
top: 0;
left: 0;
}
#con{
width: 100%;
height: 30px;
background: aquamarine;
cursor: move;
}
</style>
</head>
<body>
<div id='main'>
<div id='con'>拖动我</div>
</div>
<script>
function $(id){return document.getElementById(id);}
// 居中浮层
function aurocenter(el){
// 可视区宽高
var bodyw=document.documentElement.clientWidth;
var bodyh=document.documentElement.clientHeight;
var elw=el.offsetWidth;
var elh=el.offsetHeight;
el.style.left=(bodyw-elw)/2+'px';
el.style.top=(bodyh-elh)/2+'px';
}
aurocenter($('main'))
var offx=0;
var offy=0;
var tuodong=false; //判断是否可拖动
// 鼠标按下
$('con').addEventListener('mousedown',function(ev){
var ev=ev||window.event;
// 算出点击内容 里面的位置
offx= ev.pageX-$('main').offsetLeft;
offy= ev.pageY-$('main').offsetTop;
tuodong=true;
})
// 鼠标移动
document.οnmοusemοve=function(ev){
var ev=ev||window.event;
// 鼠标当前位置
var mousex=ev.pageX;
var mousey=ev.pageY;
var movex=0;
var movey=0;
if (tuodong===true){
// 计算出盒子距离屏幕边缘的距离
movex=mousex-offx;
movey=mousey-offy;
// 获取可视区的宽高
var pagewidth=document.documentElement.clientWidth;
var pageheight=document.documentElement.clientHeight;
// 获取大盒子的宽高
var dalogW=$('main').offsetWidth;
var dalogH=$('main').offsetHeight;
// 算出盒子边缘距离 屏幕边缘的距离
var maxx=pagewidth-dalogW;
var maxy=pageheight-dalogH;
// movex>0 并且 movex<(页面最大宽度 - 浮层的宽度)
movex=Math.min(maxx, Math.max(0,movex))
movey=Math.min(maxy, Math.max(0,movey))
// 盒子偏移量
$('main').style.left=movex+'px';
$('main').style.top=movey+'px';
}
}
// 鼠标松开
document.οnmοuseup=function(){
tuodong=false;
}
window.οnresize=function(){
aurocenter($('main'));
}
</script>
</body>
</html>
js拖动窗口
最新推荐文章于 2024-03-27 21:44:11 发布