用 mouse 事件写一个可拖曳的div
2019-07-19 本文已影响0人
hzl的学习小记
用 mouse 事件写一个可拖曳的 div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="xxx"></div>
</body>
</html>
div{
border:1px solid red;
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
}
*{margin:0;padding:0;}
var position=null
var dragging = false;
xxx.addEventListener('mousedown',function(e){
dragging = true;
position = [e.clientX, e.clientY]
})
document.addEventListener('mousemove',function(e){
if(dragging === false) return;
const x = e.clientX;
const y = e.clientY;
const deltaX = x- position[0]
const deltaY = y - position[1]
const left = parseInt(xxx.style.left) || 0;
const top = parseInt(xxx.style.top) || 0;
xxx.style.left =left + deltaX + 'px'
xxx.style.top =top + deltaY + 'px'
position = [x,y]
})
document.addEventListener('mouseup',function(e){
dragging = false
})
测试demo：
jsbin
