一、原生 js 实现

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <link rel="stylesheet" href="css/reset.min.css">
  7.     <style>
  8.         html,
  9.         body {
  10.             height: 100%;
  11.             overflow: hidden;
  12.         }
  13.         #box {
  14.             position: absolute;
  15.             top: 0;
  16.             left: 0;
  17.             width: 100px;
  18.             height: 100px;
  19.             background: red;
  20.         }
  21.         #box h2 {
  22.             height: 30px;
  23.             background: green;
  24.             cursor: move;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div id="box">
  30.         <h2></h2>
  31.     </div>
  32.     <script>
  33.         let css = function (curEle, attr) {
  34.             return parseFloat(window.getComputedStyle(curEle, null)[attr]);
  35.         };
  37.         let down = function (ev) {
  38.             this.startX = ev.pageX;
  39.             this.startY = ev.pageY;
  40.             this.startL = css(this, 'left');
  41.             this.startT = css(this, 'top');
  43.             this._MOVE = move.bind(this);
  44.             this._UP = up.bind(this);
  45.             document.addEventListener('mousemove', this._MOVE);
  46.             document.addEventListener('mouseup', this._UP);
  47.         };
  48.         let move = function (ev) {
  49.             let curL = ev.pageX - this.startX + this.startL,
  50.                 curT = ev.pageY - this.startY + this.startT;
  51.             let minL = 0,
  52.                 minT = 0,
  53.                 maxL = document.documentElement.clientWidth - this.offsetWidth,
  54.                 maxT = document.documentElement.clientHeight - this.offsetHeight;
  55.             curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
  56.             curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
  57.             this.style.left = curL + 'px';
  58.             this.style.top = curT + 'px';
  59.         };
  60.         let up = function (ev) {
  61.             document.removeEventListener('mousemove', this._MOVE);
  62.             document.removeEventListener('mouseup', this._UP);
  63.         };
  64.         box.addEventListener('mousedown', down); 
  65.     </script>
  66. </body>
  67. </html>

二、HTML5 中 DRAG 事件

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <link rel="stylesheet" href="css/reset.min.css">
  8.     <style>
  9.         html,
  10.         body {
  11.             height: 100%;
  12.             overflow: hidden;
  13.         }
  15.         #box {
  16.             position: absolute;
  17.             top: 0;
  18.             left: 0;
  19.             z-index: 10;
  20.             width: 100px;
  21.             height: 100px;
  22.             background: red;
  23.             cursor: move;
  24.         }
  26.         #container {
  27.             position: relative;
  28.             box-sizing: border-box;
  29.             margin: 30px auto;
  30.             width: 300px;
  31.             height: 200px;
  32.             border: 2px solid lightseagreen;
  33.         }
  34.     </style>
  35. </head>
  37. <body>
  38.     <div id="box" draggable="true"></div>
  39.     <div id="container"></div>
  40.     <!-- 
  41.         HTML5中DRAG事件：可以把一个元素从当前位置拖拽到指定的容器中
  42.             dragstart
  43.             drag
  44.             dragend
  45.             dragover 拖动元素到指定的目标区域上
  46.             drop 可以把拖动元素放到目标区域中了
  48.         1. 给要拖拽的元素设置可被拖拽属性
  49.           draggable = "true"
  50.         2. 在拖拽开始的时候，记录一些信息
  51.      -->
  52.     <script>
  53.         box.ondragstart = function (ev) {
  54.             // DragEvent:拖拽事件对象
  55.             // dataTransfer（DataTransfer）：setData / getData / clearData 设置的内容最后都会变为字符串  setData(类型标识,对应的值)
  56.             ev.dataTransfer.setData('@A', ev.target.id);
  57.         }
  58.         container.ondragover = function (ev) {
  59.             ev.preventDefault();
  60.         }
  61.         container.ondrop = function (ev) {
  62.             ev.preventDefault();
  63.             let _ID = ev.dataTransfer.getData('@A'),
  64.                 _ELE = document.getElementById(_ID);
  65.             container.appendChild(_ELE);
  66.         }
  67.     </script>
  68. </body>
  70. </html>