需求一：推盒子按照上下左右箭头 移动盒子

onkeydown 事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         .box {
  10.             position: relative;
  11.             left: 0px;
  12.             top: 0px;
  13.             width: 100px;
  14.             height: 100px;
  15.             background: lightcoral;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="box"></div>
  21.     <script>
  22.         let box = document.querySelector('.box');
  23.         //keypress 有一些系统键监听不到
  24.         // key
  25.         let t = 0, l = 0;
  26.         window.onkeydown = function (e) {
  27.             // e.key e.code e.keyCode 表示按下的键盘信息
  28.             // e.key按的哪个键  e.code是英文键盘字符 e.keyCode是键盘数组
  29.             switch (e.keyCode) {             
  30.                 case 37:
  31.                     // 左箭头
  32.                     l -= 5;
  33.                     box.style.left = l + 'px';
  34.                     break;
  35.                 case 38:
  36.                     // 上箭头
  37.                     t -= 5;
  38.                     box.style.top = t + 'px';
  39.                     break;
  40.                 case 39:
  41.                     l += 5;
  42.                     box.style.left = l + 'px';
  43.                     // 右箭头
  44.                     break;
  45.                 case 40:
  46.                     // 下箭头
  47.                     t += 5;
  48.                     box.style.top = t + 'px';
  49.                     break;
  50.             }
  51.         }
  52.     </script>
  53. </body>
  54. </html>

需求二 拖拽

vlm4o-9rrh1.gif

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>拖拽</title>
  9.     <style>
  10.         #box {
  11.             position: fixed;
  12.             width: 50px;
  13.             height: 50px;
  14.             background-color: lightsalmon;
  15.             border-radius: 50%;
  16.             cursor: pointer;
  17.             /* 用户禁止选中 */
  18.             -webkit-user-select: none;
  19.             -moz-user-select: none;
  20.             -o-user-select: none;
  21.             user-select: none;
  22.         }
  23.         #box2{
  24.             position: fixed;
  25.             width: 50px;
  26.             height: 50px;
  27.             background-color:aqua;
  28.             border-radius: 50%;
  29.             cursor: pointer;
  30.             -webkit-user-select: none;
  31.             -moz-user-select: none;
  32.             -o-user-select: none;
  33.             user-select: none;
  34.         }
  35.         /* 其实mouseup并没有失效，而是你拖动时，鼠标选中了其他的元素，其实的话，鼠标即使松开，浏览器内部还是认为用户在复制文字，鼠标还是按下的状态，所以不会触发mouseup事件。 */
  36.     </style>
  37. </head>
  39. <body>
  40.     <div id="box">
  42.     </div>
  43.     <div id="box2">
  45.     </div>
  46.     <script>
  47.         let box = document.querySelector('#box');
  48.         let box2= document.querySelector('#box2');
  49.         function start(e) {
  50.             // 计算最大宽度和高度
  51.             this.maxTop = document.documentElement.clientHeight - this.offsetHeight;
  52.             this.maxLeft = document.documentElement.clientWidth - this.offsetWidth;
  53.             //记录球的初始位置和鼠标按下的位置
  54.             let pos = this.getBoundingClientRect();
  55.             // 球的初始位置
  56.             this.posLeft = pos.left;
  57.             this.postTop = pos.top;
  58.             // 鼠标按下的位置
  59.             this.startX = e.pageX;
  60.             this.startY = e.pageY;
  61.          // 为了下面的move和end正常拿到球的this，强制改变this指向，把改变this指向后的函数体绑定给window。
  62.         // this从window改成了球
  63.         // this._move是存储改变this指向之后的函数体
  64.         // 把所有需用用到的属性和方法都放在this上，
  65.             this._move = move.bind(this);
  66.             window.addEventListener('mousemove', this._move);
  68.             this._end = end.bind(this);
  69.             window.addEventListener('mouseup', this._end);
  70.         };
  71.         function move(e) {
  72.             // 改变之后的this是鼠标按下的元素
  73.             // 计算鼠标移动的距离【鼠标移动后的位置-鼠标移动前的位置】+球的初始位置=球最后的位置
  74.             let top = e.pageY - this.startY + this.postTop;
  75.             let left = e.pageX - this.startX + this.posLeft;
  76.             // 让top/left分别和最大值最小值比较，划定界限
  77.             top = top > this.maxTop ? this.maxTop : (top < 0 ? 0 : top);
  78.             left = left > this.maxLeft ? this.maxLeft : (left < 0 ? 0 : left);
  80.             // top left 就是最后球的位置
  81.             this.style.top=top+'px';
  82.             this.style.left=left+'px';
  84.         };
  85.         function end() {
  86.             window.removeEventListener('mousemove', this._move);
  87.             window.removeEventListener('mouseup', this._end);
  88.         };
  89.         box.addEventListener('mousedown', start);
  90.         box2.addEventListener('mousedown',start);
  91.     </script>
  92. </body>
  93. </html>