前端学习-JS鼠标拖拽+显示坐标_js 拖拽结束后坐标-优快云博客

本文链接：https://blog.youkuaiyun.com/Corgi_gg/article/details/123375828

本文通过JavaScript实现了一个简单的HTML元素拖拽功能，并在拖动过程中显示鼠标坐标。涉及到的技术包括DOM操作、事件监听以及坐标计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#box1 {

height: 200px;

width: 200px;

border: 2px solid black;

margin-bottom: 20px;

position: absolute;

}

#box2 {

height: 200px;

width: 200px;

border: 2px solid black;

position: absolute;

left: 600px;

top: 600px;

background-color: red;

}

#box3 {

height: 200px;

width: 200px;

border: 2px solid black;

position: fixed;

position: absolute;

left: 400px;

top: 400px;

background-color: black;

}

body {

height: 8000px;

}

</style>

</head>

<body>

const box1 = document.getElementById("box1")

const box2 = document.getElementById("box2")

const box3 = document.getElementById("box3")

box1.onmousedown = function (event) {

let box_left = event.clientX - box1.offsetLeft

let box_top = event.clientY - box1.offsetTop

document.onmousemove = function (event) {

let x = event.clientX

let y = event.clientY

let scoll_top = document.documentElement.scrollTop

let scoll_left = document.documentElement.scrollLeft

box1.style.top = (y + scoll_top - box_top) + "px"

box1.style.left = (x + scoll_left - box_left) + "px"

}

document.onmouseup = function (event) {

document.onmousemove = null

document.onmouseup = null

}

return false

}

box1.onwheel = function (event) {

if (event.wheelDelta > 0 && box1.clientHeight >20) {

box1.style.height = box1.clientHeight - 10 + "px"

}

if (event.wheelDelta < 0) {

box1.style.height = box1.clientHeight + 10 + "px"

}

return false

}

box3.onmousedown = function () {

let box_left = event.clientX - box3.offsetLeft

let box_top = event.clientY - box3.offsetTop

document.onmousemove = function (event) {

let x = event.clientX

let y = event.clientY

let scoll_top = document.documentElement.scrollTop

let scoll_left = document.documentElement.scrollLeft

box3.style.top = (y + scoll_top - box_top) + "px"

box3.style.left = (x + scoll_left - box_left) + "px"

box1.innerHTML = ([x + scoll_left, y + scoll_top])

}

document.onmouseup = function () {

document.onmousemove = null

document.onmouseup = null

}

return false

}

box2.onmousedown = function () {

let box_left = event.clientX - box2.offsetLeft

let box_top = event.clientY - box2.offsetTop

document.onmousemove = function (event) {

let x = event.clientX

let y = event.clientY

let scoll_top = document.documentElement.scrollTop

let scoll_left = document.documentElement.scrollLeft

box2.style.top = (y + scoll_top - box_top) + "px"

box2.style.left = (x + scoll_left - box_left) + "px"

box1.innerHTML = ([x + scoll_left, y + scoll_top])

}

document.onmouseup = function () {

document.onmousemove = null

document.onmouseup = null

}

return false

}

</script>

</body>

</html>