1、draggable:

(1)可以拖拽一个虚幻的方块:

  1. <div class="a" draggable="true"></div><!-- chrome,safari可以使用，火狐不好使；默认false -->
  2. <!-- 默认可以被拖拽的 -->
  3.   <a href=""></a>
  4.   <img src="" alt="">

(2)拖拽的生命周期，拖拽的组成 

  1. <!-- 生命周期：拖拽开始，拖拽进行中，拖拽结束 -->
  2. <!-- 组成：被拖拽的物体，目标区域 -->

(3)拖拽事件：

  1. <!-- 按下物体的瞬间是不会触发事件的 -->
  2. <script>
  3.     var oDragDiv = document.getElementsByClassName('a')[0];
  4.   //   拖拽的三个事件：
  5.     oDragDiv.ondragstart = function (e) {
  6.         console.log(e);
  7.     }
  8.     oDragDiv.ondrag = function (e) {
  9.         console.log(e);
  10.     }
  11.     oDragDiv.ondragend = function (e) {
  12.         console.log(e);

(4)拖拽实例：

  1.  <style>
  2.         *{
  3.             margin: 0;
  4.             padding: 0;
  5.         }
  6.         .a{
  7.             position: absolute;
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: #abcdef;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="a" draggable="true"></div>
  16.   <!-- 拖拽实例： -->
  17.   <script>
  18.       var oDragDiv = document.getElementsByClassName('a')[0];
  19.       var beginX = 0;
  20.       var beginY = 0;
  22.       oDragDiv.ondragstart = function (e) {
  23.           beginX = e.clientX;
  24.           beginY = e.clientY;
  25.       }
  26.       oDragDiv.ondragend = function (e) {
  27.           var x = e.clientX - beginX;
  28.           var y = e.clientY - beginY;
  29.           oDragDiv.style.left = oDragDiv.offsetLeft +x + "px";
  30.           oDragDiv.style.top = oDragDiv.offsetTop +y+ "px";
  31.           console.log(x);
  32.           console.log(oDragDiv.offsetLeft);
  33.           console.log(oDragDiv.style.left);
  34.       }
  35.   </script>
  36. </body>