在web開發中，鼠標拖拽效果非常常見，例如百度的登錄頁，點擊登錄會彈出一個窗口，並且這個窗口可以拖動；那麼這樣的拖拽效果如何實現呢 ？其實實現很簡章，搞清楚他的原理就很容易了；首當其沖的，要涉及到鼠標的三個事件，分別為鼠標按下、移動、松開；在這三個事件裡分別計算元素鼠標的位置即可；
復制代碼
/*******
拖拽原理1：
拖拽狀態 = 0
鼠標在元素上按下的時候 {
拖拽狀態 = 1
記錄下鼠標的x和y坐標
記錄下元素的x和y坐標
}
鼠標在元素上移動的時候 {
如果拖拽狀態是0就什麼也不做。
如果拖拽狀態是1， 那麼
元素y = 現在鼠標y - 原來鼠標y + 原來元素y
元素x = 現在鼠標x - 原來鼠標x + 原來元素x
}
鼠標在任何時候放開的時候 {
拖拽狀態 = 0
}
將以上思路翻譯成JS代碼就可以實現拖拽的效果了。
*******/
上面這個原理也可以演變為：
/*******
拖拽原理2：
拖拽狀態 = 0
鼠標在元素上按下的時候 {
拖拽狀態 = 1
記錄下鼠標的x和y坐標
記錄下元素的x和y坐標
元素的偏移值X=元素的X-元素的offsetLeft
元素的偏移值Y=元素的Y-元素的offsetTop
}
鼠標在元素上移動的時候 {
如果拖拽狀態是0就什麼也不做。
如果拖拽狀態是1， 那麼
元素y = 現在鼠標y -元素的偏移值X
元素x = 現在鼠標x -元素的偏移值Y
}
鼠標在任何時候放開的時候 {
拖拽狀態 = 0
}
將以上思路翻譯成JS代碼就可以實現拖拽的效果了。
*******/
上面兩種思路其實是異曲同工，需要注意的是在移動事件裡，還要處理元素邊緣的位置，以防止元素被拖動的時候拖到浏覽器以外的地方；直接來看代碼：
代碼一：
<!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>
代碼一對應原理一，代碼二對應原理二，效果都是一樣的，只不過原理二是在原理一的基礎上演變過來的，演變之後，元素拖動的邊緣處理也相應的做了變化。
以上就是本文的全部內容，希望對大家的學習有所幫助。