這篇文章主要為大家詳細介紹了js仿百度登錄頁實現(xiàn)拖動窗口效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在web開發(fā)中，鼠標拖拽效果非常常見，例如百度的登錄頁，點擊登錄會彈出一個窗口，并且這個窗口可以拖動；那么這樣的拖拽效果如何實現(xiàn)呢 ？其實實現(xiàn)很簡章，搞清楚他的原理就很容易了；首當其沖的，要涉及到鼠標的三個事件，分別為鼠標按下、移動、松開；在這三個事件里分別計算元素鼠標的位置即可；
代碼如下:
/*******
拖拽原理1：
拖拽狀態(tài) = 0
鼠標在元素上按下的時候 {
拖拽狀態(tài) = 1
記錄下鼠標的x和y坐標
記錄下元素的x和y坐標
}
鼠標在元素上移動的時候 {
如果拖拽狀態(tài)是0就什么也不做。
如果拖拽狀態(tài)是1， 那么
元素y = 現(xiàn)在鼠標y - 原來鼠標y + 原來元素y
元素x = 現(xiàn)在鼠標x - 原來鼠標x + 原來元素x
}
鼠標在任何時候放開的時候 {
拖拽狀態(tài) = 0
}
將以上思路翻譯成JS代碼就可以實現(xiàn)拖拽的效果了。
*******/
上面這個原理也可以演變?yōu)椋?/P>
/*******
拖拽原理2：
拖拽狀態(tài) = 0
鼠標在元素上按下的時候 {
拖拽狀態(tài) = 1
記錄下鼠標的x和y坐標
記錄下元素的x和y坐標
元素的偏移值X=元素的X-元素的offsetLeft
元素的偏移值Y=元素的Y-元素的offsetTop
}
鼠標在元素上移動的時候 {
如果拖拽狀態(tài)是0就什么也不做。
如果拖拽狀態(tài)是1， 那么
元素y = 現(xiàn)在鼠標y -元素的偏移值X
元素x = 現(xiàn)在鼠標x -元素的偏移值Y
}
鼠標在任何時候放開的時候 {
拖拽狀態(tài) = 0
}
將以上思路翻譯成JS代碼就可以實現(xiàn)拖拽的效果了。
*******/
上面兩種思路其實是異曲同工，需要注意的是在移動事件里，還要處理元素邊緣的位置，以防止元素被拖動的時候拖到瀏覽器以外的地方；直接來看代碼：
代碼一：
代碼如下:
<!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>
代碼一對應(yīng)原理一，代碼二對應(yīng)原理二，效果都是一樣的，只不過原理二是在原理一的基礎(chǔ)上演變過來的，演變之后，元素拖動的邊緣處理也相應(yīng)的做了變化。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。
公眾號
事業(yè)單位
當前位置：
公考類
招聘類
各類考試