js實現標籤拖動
阿新 • • 發佈:2022-03-18
// F12,給要拖動的標籤加個id my_wsh,然後控制執行如下JS即可實現標籤拖放
var box = document.getElementById("my_wsh"); //獲取元素
var x, y; //滑鼠相對與div左邊,上邊的偏移
var isDrop = false; //移動狀態的判斷滑鼠按下才能移動
box.onmousedown = function (e) {
var e = e || window.event; //要用event這個物件來獲取滑鼠的位置
x = e.clientX - box.offsetLeft;
y = e.clientY - box.offsetTop;
isDrop = true; //設為true表示可以移動
}
document.onmousemove = function (e) { //是否為可移動狀態 if (isDrop) { var e = e || window.event; var moveX = e.clientX - x; //得到距離左邊移動距離 var moveY = e.clientY - y; //得到距離上邊移動距離 //可移動最大距離 var maxX = document.documentElement.clientWidth - box.offsetWidth; var maxY = document.documentElement.clientHeight - box.offsetHeight;
//範圍限定 當移動的距離最小時取最大 移動的距離最大時取最小 //範圍限定方法一 /*if(moveX < 0) { moveX = 0 } else if(moveX > maxX) { moveX = maxX; }
if(moveY < 0) { moveY = 0; } else if(moveY > maxY) { moveY = maxY; } */ //範圍限定方法二 moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY)); box.style.left = moveX + "px"; box.style.top = moveY + "px"; } else { return; }
}
document.onmouseup = function () { isDrop = false; //設定為false不可移動 }
document.onmousemove = function (e) { //是否為可移動狀態 if (isDrop) { var e = e || window.event; var moveX = e.clientX - x; //得到距離左邊移動距離 var moveY = e.clientY - y; //得到距離上邊移動距離 //可移動最大距離 var maxX = document.documentElement.clientWidth - box.offsetWidth; var maxY = document.documentElement.clientHeight - box.offsetHeight;
//範圍限定 當移動的距離最小時取最大 移動的距離最大時取最小 //範圍限定方法一 /*if(moveX < 0) { moveX = 0 } else if(moveX > maxX) { moveX = maxX; }
if(moveY < 0) { moveY = 0; } else if(moveY > maxY) { moveY = maxY; } */ //範圍限定方法二 moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY)); box.style.left = moveX + "px"; box.style.top = moveY + "px"; } else { return; }
}
document.onmouseup = function () { isDrop = false; //設定為false不可移動 }