java 拖动窗口位置_拖动窗口并移动窗口位置

该功能常见于滑动验证码

HTML部分

按住拖动

css部分

* {

padding: 0;

margin: 0;

}

#box {

width: 400px;

height: 300px;

background-color: orange;

position: absolute;

text-align: center;

color: #ffffff;

}

#title {

width: 100%;

height: 2em;

line-height: 2em;

background-color: #999999;

cursor: move;

}

JS部分

var box = document.getElementsByClassName('box')[0];

var title = document.getElementsByClassName('title')[0];

//0.声明一个开关变量

var off = 0;

//0.1声明一个变量一保存鼠标与盒子之间的距离

var cur = {};

//1.给标题添加鼠标按下事件

title.onmousedown = function(e){

off = 1;

//1.1 计算鼠标位置-盒子到页面的位置，得到一个差，永远不变

cur.x = e.clientX-box.offsetLeft;

cur.y = e.clientY-box.offsetTop;

}

//2.添加鼠标移动事件

document.onmousemove = function(e){

//2.1判断按下的开关状态 如果是真再运行

if(!off) return;

var left = e.clientX - cur.x;

var tops = e.clientY - cur.y;

//限制box不超出浏览器

left = left<0?0:left;

tops = tops<0?0:tops;

left = left >= window.innerWidth-400 ? window.innerWidth-400 : left;

tops = tops >= window.innerHeight-300 ? window.innerHeight-300 : tops;

box.style.left = left+'px';

box.style.top = tops+'px';

}

//3.添加鼠标抬起事件

title.onmouseup = title.οnmοuseοut= function(){

console.log('鼠标抬起');

off = 0;

}