<!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>
* {
padding: 0;
margin: 0;
}
#father {
width: 500px;
height: 500px;
position: relative;
left: 100px;
top: 100px;
border: 2px solid red;
}
#box1 {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
cursor: move;
left: 0;
top: 0;
}
#box2 {
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
cursor: move;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="father" onclick="onClickFather(event)">
<div id="box1" onmousedown="down('box1',event)">拖拽块1</div>
<div id="box2" onmousedown="down('box2',event)">拖拽块2</div>
</div>
<script>
// 鼠标控制移动
var dragging = false //控制移动状态
var boxX, boxY, mouseX, mouseY, offsetX, offsetY
var father = document.getElementById('father')
// 键盘方向键控制移动
var topNum = 0
var leftNum = 0
var allowWidth = 0
var allowHeight = 0
function onClickFather(e) {
if (e.target === father) {
document.removeEventListener('keydown', keyDown)
}
}
// 鼠标的移动动作
document.onmousemove = move
// 释放鼠标的动作
document.onmouseup = up
// 鼠标按下后的函数,e为事件对象
function down(name, e) {
box = document.getElementById(name)
allowWidth = father.clientWidth - box.offsetWidth
allowHeight = father.clientHeight - box.offsetHeight
document.addEventListener('keydown', keyDown)
dragging = true
// 获取元素所在的坐标
boxX = box.offsetLeft
boxY = box.offsetTop
// 获取鼠标所在的坐标
mouseX = parseInt(getMouseXY(e).x)
mouseY = parseInt(getMouseXY(e).y)
// 鼠标相对元素左和上边缘的坐标
offsetX = mouseX - boxX
offsetY = mouseY - boxY
}
// 鼠标移动调用的函数
function move(e) {
if (dragging) {
// 获取移动后的元素的坐标
var x = getMouseXY(e).x - offsetX
var y = getMouseXY(e).y - offsetY
// 可移动位置的改变
// 计算可移动位置的大小， 保证元素不会超过可移动范围
// 此处就是父元素的宽度减去子元素宽度
var width = father.clientWidth - box.offsetWidth
var height = father.clientHeight - box.offsetHeight
// min方法保证不会超过右边界，max保证不会超过左边界
x = Math.min(Math.max(0, x), width)
y = Math.min(Math.max(0, y), height)
// 给元素及时定位
box.style.left = x + 'px'
box.style.top = y + 'px'
// 使得键盘方向键也可控制移动
leftNum = x
topNum = y
}
}
// 释放鼠标的函数
function up(e) {
dragging = false
}
// 函数用于获取鼠标的位置
function getMouseXY(e) {
var x = 0,
y = 0
e = e || window.event //兼容IE
if (e.pageX) {
x = e.pageX
y = e.pageY
} else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft
y = e.clientY + document.body.scrollTop - document.body.clientTop
}
return {
x,
y,
}
}
function keyDown(e) {
e = e || window.event //兼容IE
let code = e.keyCode
if (code === 38) onUp()
if (code === 40) onDown()
if (code === 37) onLeft()
if (code === 39) onRight()
}
function onUp() {
topNum -= 1
if (topNum <= 0) topNum = 0
box.style.top = topNum + 'px'
}
function onDown() {
topNum += 1
if (topNum >= allowHeight) topNum = allowHeight
box.style.top = topNum + 'px'
}
function onLeft() {
leftNum -= 1
if (leftNum <= 0) leftNum = 0
box.style.left = leftNum + 'px'
}
function onRight() {
leftNum += 1
if (leftNum >= allowWidth) leftNum = allowWidth
box.style.left = leftNum + 'px'
}
</script>
</body>
</html>
