1、重点目标区域：

  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.        .target{
  13.            position: absolute;
  14.            width: 200px;
  15.            height: 200px;
  16.            border: 1px solid black;
  17.            left: 600px;
  18.        }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div class="a" draggable="true"></div>
  23.     <div class="target"></div>
  24.     <script>
  25.         var oDragDiv = document.getElementsByClassName('a')[0];
  26.         oDragDiv.ondragstart = function (e) {
  28.         }
  29.         oDragDiv.ondragend = function (e) {
  30.             console.log("end");
  31.         }
  32.         // ****目标区域****
  33.         var oDragTarget = document.getElementsByClassName('target')[0];
  34.         oDragTarget.ondragenter = function(e) {//不是元素图形进入就触发的，而是拖拽的鼠标进入才触发的
  35.             console.log(e);
  36.         }
  37.         oDragTarget.ondragover = function(e) {
  38.             // console.log(e);
  39.             e.preventDefault();
  40.         }
  41.         oDragTarget.ondragleave = function (e) {
  43.         }
  44.         oDragTarget.ondrop =function () { //所有的标签元素，当拖拽周期结束时，默认事件是回到原处
  45.             //如果要执行ondrop事件，那就在ondragover上阻止默认事件：e.preventDefault()
  46.             //事件是由行为触发的，但是一个行为可以不止触发一个事件
  47.             console.log('drop');
  48.             /**ondragover --> 回到原处（默认）
  49.                           --> 执行drop事件 
  50.                 A->B(阻止)->C（最终被阻止）
  51.             */
  52.         }
  53.     </script>
  55. </body>