<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
background-color: #000;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script>
var oBox = document.querySelector("#box");
oBox.onmousedown = function(evt) {
var e = evt || event;
var offsetX = e.offsetX;
var offsetY = e.offsetY;
document.onmousemove = function(evt) {
var e = evt || event;
var left = e.pageX - offsetX;
var top = e.pageY - offsetY;
if (top < 0) {
top = 0;
}
var maxTop = window.innerHeight - oBox.offsetHeight;
if (top > maxTop) {
top = maxTop;
}
if (left < 0) {
left = 0;
}
var maxLeft = window.innerWidth - oBox.offsetWidth;
if (left > maxLeft) {
left = maxLeft;
}
oBox.style.left = left + "px";
oBox.style.top = top + "px";
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
js 拖拽功能
最新推荐文章于 2024-06-24 15:18:03 发布