1,實現效果:點擊Div塊並拖動鼠標,移動Div的位置。
2,實現代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移動div</title>
</head>
<body>
<div id="divSlider" style="width: 100px;height: 100px;background-color: deepskyblue;
position: absolute;top: 10px;left: 10px;">
</div>
<script>
var divSlider = document.getElementById("divSlider");
divSlider.addEventListener('mousedown', mouseDown, false);
document.addEventListener('mouseup', mouseUp, false);
function mouseDown() {
document.addEventListener('mousemove', sliderMove, false);
}
function mouseUp() {
document.removeEventListener('mousemove', sliderMove, false);
}
function sliderMove(e) {
// 解決拖拽鼠標粘滯的問題
// if (e.preventDefault) {
// e.preventDefault();
// } else {
// e.returnValue = false;
// }
divSlider.style.left = e.clientX + 'px';
divSlider.style.top = e.clientY + 'px';
}
</script>
</body>
</html>