可拖拽元素的實現
騰訊面試題（onMousemove, onMouseup, onMousedown）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.move {
position: absolute;
width: 100px;
height: 100px;
background: gray
}
</style>
</head>
<body>
<div class="container">
<div class="move">
</div>
</div>
<script>
let targetElem = document.querySelector('.move');
let windowHeight, windowWidth;
let elemHeight, elemWidth;
let ifDrag;
let moveLeft, moveTop;
document.addEventListener('mousedown', function(e){
if(e.target==targetElem){
let targetElemLocate = targetElem.getBoundingClientRect();
ifDrag = true;
windowHeight = document.documentElement.clientHeight;
windowWidth = document.documentElement.clientWidth;
elemHeight = targetElem.clientHeight;
elemWidth = targetElem.clientWidth;
elemX = e.clientX - targetElemLocate.left;
elemY = e.clientY - targetElemLocate.top;
}
})
document.addEventListener('mouseup', function(e){
ifDrag = false;
})
document.addEventListener('mousemove', function(e){
if(ifDrag){
let moveX = e.clientX - elemX;
let moveY = e.clientY - elemY;
targetElem.style.left = moveX + 'px';
targetElem.style.top = moveY + 'px';
if(moveX<0){
targetElem.style.left = 0;
}
if(moveY<0){
targetElem.style.top = 0;
}
if(moveX + elemWidth > windowWidth){
targetElem.style.left = windowWidth - elemWidth + 'px';
}
if(moveY + elemHeight > windowHeight){
targetElem.style.top = windowHeight - elemHeight + 'px';
}
}
})
</script>
</body>
</html>
