<!DOCTYPE html>
<html lang="zh">
<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></title>
<style type="text/css">
#drag {
width: 100px;
height: 100px;
background: #F0AD4E;
cursor: move;
position: absolute;
}
</style>
</head>
<body>
<div id="drag">
</div>
</body>
<script type="text/javascript">
const drag = document.querySelector('#drag')
let positionArray = []
drag.onmousedown = function (e) {
const ev = e || window.event
const clickX = ev.clientX - drag.offsetLeft
const clickY = ev.clientY - drag.offsetTop
document.onmousemove = function (e) {
let movex = e.clientX - clickX
let movey = e.clientY - clickY
if(movex<0){
movex = 0
}
if(movex>innerWidth-drag.offsetWidth){
movex = innerWidth-drag.offsetWidth
}
if(movey<0){
movey = 0
}
if(movey>innerHeight-drag.offsetHeight){
movey = innerHeight-drag.offsetHeight
}
positionArray.push({ left:movex,top:movey })
drag.style.left = `${movex}px`
drag.style.top = `${movey}px`
}
document.onmouseup = function () {
this.onmousemove = null
}
}
drag.ondblclick = function () {
let positionLength = positionArray.length
let myTimer = setInterval(function(){
positionLength--
if(positionLength<=0){
clearInterval(myTimer)
positionArray = []
return
}
drag.style.left = `${positionArray[positionLength].left}px`
drag.style.top = `${positionArray[positionLength].top}px`
},20)
}
</script>
</html>
原生js实现拖(包含拖拽的记录回放)
最新推荐文章于 2022-10-17 20:30:01 发布
6338

被折叠的 条评论
为什么被折叠?



