算法题:
手写题:实现一个可以拖拽的DIV
<!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>Document</title></head><style> * { padding: 0; margin: 0; } #box { position: absolute; left: 500px; top: 400px; height: 100px; width: 100px; background: orangered; border-radius: 8px; cursor: pointer; }</style><body> <div id="box"></div> <script> let box = document.getElementById('box') let ox,oy,px,py // 鼠标按下 box.onmousedown = function (e) { ox = parseInt( box.offsetLeft) oy = parseInt(box.offsetTop) px = e.pageX py = e.pageY document.onmousemove = move document.onmouseup = stop } function move(e) { box.style.left = e.pageX+ox - px+'px' box.style.top = e.pageY+oy-py+'px' } function stop(e) { ox = parseInt( box.offsetLeft) oy = parseInt(box.offsetTop) px = e.pageX py = e.pageY document.onmouseup = null document.onmousemove = null } </script></body></html>