<!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>Document</title>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
<script>
window.onload = function () {
var oDiv = document.getElementById("div1");
tuo(oDiv);
}
function tuo(node) {
node.onmousedown = function (ev) {
var e = ev || window.event;
var offsetX = e.clientX - this.offsetLeft;
var offsetY = e.clientY - this.offsetTop;
//被拖拽物体保持相对距离和鼠标移动
document.onmousemove = function (ev) {
var e = ev || window.event;
var l = e.clientX - offsetX;
var t = e.clientY - offsetY;
var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
//限制出街
if (l <= 0) {
l = 0;
}
if (l >= windowWidth - node.offsetWidth) {
l = windowWidth - node.offsetWidth;
}
if (t <= 0) {
t = 0;
}
if (t >= windowHeight - node.offsetHeight) {
t = windowHeight - node.offsetHeight;
}
node.style.left = l + 'px';
node.style.top = t + 'px';
}
}
//取消拖拽
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>
</html>
JS原生拖拽
最新推荐文章于 2024-07-10 14:36:18 发布