拖拽移动div

https://code.h5jun.com/fofev/edit?html,css,js,output

  1. <div id="box">
  3.   <style>
  4.         *{
  5.             margin: 0;
  6.             padding: 0;
  7.         }
  8.         body{
  9.             position: relative;
  10.         }
  11.         #box{
  12.             width: 50px;
  13.             height: 50px;
  14.             background: deepskyblue;
  15.             position: absolute;
  16.             left: 100px;
  17.             top: 50px;
  18.         }
  19.   </style>
  1.   const box = document.getElementById("box");
  2.   let nowW, nowH, flag;
  3.   box.onmousedown = function (e) {
  4.     nowW = e.clientX;
  5.     nowH = e.clientY;
  6.     flag = true;
  7.     document.onmousemove = function (e) {
  8.       if (!flag) return false;
  9.       const moveX = e.clientX - nowW;
  10.       const moveY = e.clientY - nowH;
  11.       const left = parseInt(box.style.left || 0);
  12.       const top = parseInt(box.style.top || 0);
  13.       box.style.left = left + moveX + "px";
  14.       box.style.top = top + moveY + "px";
  15.       nowW = e.clientX;
  16.       nowH = e.clientY;
  17.     };
  18.     document.onmouseup = function () {
  19.       flag = false;
  20.     };
  21.     document.onmouseleave = function () {
  22.       flag = false;
  23.     };
  24.   };

键盘移动div

https://code.h5jun.com/kehum/edit?html,css,js,output

  1. <body>
  2.     <div id="box">
  3.       <div id="move">静止</div>
  4.     </div>
  5.     <script>
  6.       const box = document.getElementById("box");
  7.       const move = document.getElementById("move");
  8.       let lefts = box.style.left || 0;
  9.       let tops = box.style.top || 0;
  10.       document.addEventListener("keydown", function (e) {
  11.         const code = e.keyCode;
  12.         move.innerHTML = "开始移动";
  13.         switch (code) {
  14.           case 38:
  15.             move.innerHTML = "上";
  16.             tops -= 5;
  17.             break;
  18.           case 40:
  19.             move.innerHTML = "下";
  20.             tops += 5;
  21.             break;
  22.           case 37:
  23.             move.innerHTML = "左";
  24.             lefts -= 5;
  25.             break;
  26.           case 39:
  27.             move.innerHTML = "右";
  28.             lefts += 5;
  29.             break;
  30.           default:
  31.             break;
  32.         }
  34.         box.style.top = tops + "px";
  35.         box.style.left = lefts + "px";
  36.       });
  37.       document.addEventListener("keyup", function () {
  38.         move.innerHTML = "静止";
  39.       });
  40.       document.addEventListener("keypress", function () {
  41.         console.log("keypress");
  42.       });
  43.     </script>
  44.   </body>