丸子学HTML（学习1小时 - 拖拽）

• 定义和用法：拖放是 HTML5 中非常常见的功能。
• 在拖放的过程中会触发以下事件：
  a) 在拖动目标上触发事件 (源元素):
  ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发
  ondragend - 用户完成元素拖动后触发
  b) 释放目标时触发的事件— 当拖拽元素在目标容器上进行操作的时候:
  ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

• 注意：

1. 在拖动元素时，每隔350 毫秒会触发 ondrag 事件。
2. 为了让元素可拖动，需要使用HTML5 draggable属性
3. 链接和图片默认是可拖动的，不需要 draggable 属性
4. 可以通过addEventListener来添加拖拽相关事件
5. 事件源：触发事件的源，一般情况下我们会将相同操作的多个对象绑定到同一个处理事件，同时传递当前的对象到处理方法，这就是事件源参数

尝试一下

  let oUl = document.querySelector('#dragBox');
  let oDragBox = document.querySelectorAll('li');
  let oDelete = document.querySelector('.delete');
  let currentDragDom = null;
  for(let i=0; i<oDragBox.length; i++){
      // 被拖动的元素
      oDragBox[i].ondragstart = function(e) {
          currentDragDom = e.target;
          oDragBox[i].style.cssText = 'background: #ccc;color: #fff;'
      }  
  }
  // 放入哪里
  oDelete.ondrop = function(e){
      currentDragDom.style.cssText = `background: rgb(18, 204, 250);color: #000;animation: scale 330ms ease-in-out`
      oUl.removeChild(currentDragDom);
      oDelete.appendChild(currentDragDom)  
  }
  oDelete.ondragover = function(e){
      e.preventDefault()
  }
  // 拖动进入的元素
  oDelete.ondragenter = function(e) {
      e.preventDefault();
      e.target.style.cssText = `box-shadow: 0 0 12px 1px rgb(18, 204, 250) inset;`
  } 
  // 拖动离开元素 
  oDelete.ondragleave = function(e) {
      e.target.style.cssText = `box-shadow: 0 0 12px 1px rgb(243, 167, 3) inset;`
  }