console
let div = document.getElementsByClassName('box')[0]
function drag(item){
let style = getComputedStyle(item)
let diffx,diffy,left,top
if(style.position !== 'absolute'){
item.style.position = 'absolute'
}
let downFlag = false;
function onDragDown(e){
console.log('鼠标落下')
diffx = e.clientX - div.offsetLeft
diffy = e.clientY - div.offsetTop
downFlag = true;
}
function onDragUp(){
console.log('鼠标抬起')
downFlag = false;
}
function onDragMove(e){
if(!downFlag){
return
}
left = e.clientX - diffx
top = e.clientY - diffy
if(left < 0){
left = 0
}else if(left > window.innerWidth - div.offsetWidth){
left = window.innerWidth - div.offsetWidth
}
if(top < 0){
top = 0
}else if(top > window.innerHeight - div.offsetHeight){
top = window.innerHeight - div.offsetHeight
}
item.style.left = left + 'px'
item.style.top = top + 'px'
}
item.addEventListener('mousedown',onDragDown)
document.addEventListener('mousemove',onDragMove)
document.addEventListener('mouseup',onDragUp)
}
drag(div)
<div class="box">
</div>
<div class="box2">
</div>
*{
padding: 0;
margin: 0;
}
.box{
position: absolute;
width: 100px;
height: 100px;
background-color: lavender
}
.box2{
position: absolute;
left: 200px;
width: 200px;
height: 200px;
background-color: lawngreen
}