這篇文章主要為大家詳細(xì)介紹了js仿百度登錄頁實(shí)現(xiàn)拖動(dòng)窗口效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在web開發(fā)中，鼠標(biāo)拖拽效果非常常見，例如百度的登錄頁，點(diǎn)擊登錄會(huì)彈出一個(gè)窗口，并且這個(gè)窗口可以拖動(dòng)；那么這樣的拖拽效果如何實(shí)現(xiàn)呢 ？其實(shí)實(shí)現(xiàn)很簡(jiǎn)章，搞清楚他的原理就很容易了；首當(dāng)其沖的，要涉及到鼠標(biāo)的三個(gè)事件，分別為鼠標(biāo)按下、移動(dòng)、松開；在這三個(gè)事件里分別計(jì)算元素鼠標(biāo)的位置即可；
代碼如下:
/*******
拖拽原理1：
拖拽狀態(tài) = 0
鼠標(biāo)在元素上按下的時(shí)候 {
拖拽狀態(tài) = 1
記錄下鼠標(biāo)的x和y坐標(biāo)
記錄下元素的x和y坐標(biāo)
}
鼠標(biāo)在元素上移動(dòng)的時(shí)候 {
如果拖拽狀態(tài)是0就什么也不做。
如果拖拽狀態(tài)是1， 那么
元素y = 現(xiàn)在鼠標(biāo)y - 原來鼠標(biāo)y + 原來元素y
元素x = 現(xiàn)在鼠標(biāo)x - 原來鼠標(biāo)x + 原來元素x
}
鼠標(biāo)在任何時(shí)候放開的時(shí)候 {
拖拽狀態(tài) = 0
}
將以上思路翻譯成JS代碼就可以實(shí)現(xiàn)拖拽的效果了。
*******/
上面這個(gè)原理也可以演變?yōu)椋?/P>
/*******
拖拽原理2：
拖拽狀態(tài) = 0
鼠標(biāo)在元素上按下的時(shí)候 {
拖拽狀態(tài) = 1
記錄下鼠標(biāo)的x和y坐標(biāo)
記錄下元素的x和y坐標(biāo)
元素的偏移值X=元素的X-元素的offsetLeft
元素的偏移值Y=元素的Y-元素的offsetTop
}
鼠標(biāo)在元素上移動(dòng)的時(shí)候 {
如果拖拽狀態(tài)是0就什么也不做。
如果拖拽狀態(tài)是1， 那么
元素y = 現(xiàn)在鼠標(biāo)y -元素的偏移值X
元素x = 現(xiàn)在鼠標(biāo)x -元素的偏移值Y
}
鼠標(biāo)在任何時(shí)候放開的時(shí)候 {
拖拽狀態(tài) = 0
}
將以上思路翻譯成JS代碼就可以實(shí)現(xiàn)拖拽的效果了。
*******/
上面兩種思路其實(shí)是異曲同工，需要注意的是在移動(dòng)事件里，還要處理元素邊緣的位置，以防止元素被拖動(dòng)的時(shí)候拖到瀏覽器以外的地方；直接來看代碼：
代碼一：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS拖拽</title>
<style>
*{padding: 0; margin: 0; }
.box{width: 100px;height: 100px;background: blue;position: absolute; }
</style>
<script>
var isDown = false;
var ObjLeft, ObjTop, posX, posY, obj;
window.onload = function() {
obj = document.getElementById('box');
obj.onmousedown = down;
document.onmousemove = move;
document.onmouseup = up;
}
function down(event) {
obj.style.cursor = "move";
isDown = true;
ObjLeft = obj.offsetLeft;
ObjTop = obj.offsetTop;
posX = parseInt(mousePosition(event).x);
posY = parseInt(mousePosition(event).y);
}
function move(event) {
if (isDown == true) {
var x = parseInt(mousePosition(event).x - posX + ObjLeft);
var y = parseInt(mousePosition(event).y - posY + ObjTop);
var w = document.documentElement.clientWidth - obj.offsetWidth;
var h = document.documentElement.clientHeight - obj.offsetHeight;
console.log(x + ',' + y);
if (x < 0) {
x = 0
} else if (x > w) {
x = w
};
if (y < 0) {
y = 0
}else if (y > h) {
y= h
};
obj.style.left = x + 'px';
obj.style.top = y + 'px';
}
}
function up() {
isDown = false;
}
function mousePosition(evt) {
var xPos, yPos;
evt = evt || window.event;
if (evt.pageX) {
xPos = evt.pageX;
yPos = evt.pageY;
} else {
xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
}
return {
x: xPos,
y: yPos
}
}
</script>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>
代碼二：
代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS拖拽</title>
<style>
*{padding: 0; margin: 0; }
.box{width: 100px;height: 100px;background: blue;position: absolute; }
</style>
<script>
var isDown = false;
var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY;
window.onload = function() {
obj = document.getElementById('box');
obj.onmousedown = down;
document.onmousemove = move;
document.onmouseup = up;
}
function down(event) {
obj.style.cursor = "move";
isDown = true;
ObjLeft = obj.offsetLeft;
ObjTop = obj.offsetTop;
posX = parseInt(mousePosition(event).x);
posY = parseInt(mousePosition(event).y);
offsetX=posX-ObjLeft;
offsetY=posY-ObjTop;
}
function move(event) {
if (isDown == true) {
var x=mousePosition(event).x-offsetX
var y=mousePosition(event).y-offsetY
var w = document.documentElement.clientWidth - obj.offsetWidth;
var h = document.documentElement.clientHeight - obj.offsetHeight;
console.log(x + ',' + y);
x=Math.min(w,Math.max(0,x));
y=Math.min(h,Math.max(0,y));
obj.style.left = x + 'px';
obj.style.top = y + 'px';
}
}
function up() {
isDown = false;
}
function mousePosition(evt) {
var xPos, yPos;
evt = evt || window.event;
if (evt.pageX) {
xPos = evt.pageX;
yPos = evt.pageY;
} else {
xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft;
yPos = evt.clientY + document.body.scrollTop - document.body.clientTop;
}
return {
x: xPos,
y: yPos
}
}
</script>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>
代碼一對(duì)應(yīng)原理一，代碼二對(duì)應(yīng)原理二，效果都是一樣的，只不過原理二是在原理一的基礎(chǔ)上演變過來的，演變之后，元素拖動(dòng)的邊緣處理也相應(yīng)的做了變化。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試