image.png

  1. 当 drag元素被拖动时，原来容器中的drag元素并不会消失
    1. 需要手动隐藏
    2. 添加 class=’visible’
  2. 如果同步操作会立马触发 dragend事件导致拖动效果消失，
    1. 所以在 setTimeout的回调中，异步设置可确保拖动操作开始后，再隐藏 drag元素
  3. 在 dragEnter和 dragOver方法中，要通过 e.preventDefault来取消事件
    1. 表示容器是一个合法的 droppable元素，接收拖拽的容器，否则：
    2. 接收容器的drop事件将无法触发，接下来的操作也将无法进行
  4. 在 dragDrop方法中，直接使用append方法将draggable元素移动至当前容器下

drag事件触发顺序

dragover会一直触发
image.png
.visible 为drag拖拽开始后，隐藏拖拽的元素
.dragging为drag拖拽元素正在被拖动的状态，增加黄色border
.drag-over为draggable元素被拖动到容器上方时容器的状态，增加灰色虚线border
image.png

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>html5-drag drop</title>
  9.   <style>
  10.     body {
  11.       background-color: rgba(233, 150, 122, 0.1);
  12.     }
  14.     /* 拖拽的元素 */
  15.     .draggable {
  16.       background-image: url('http://via.placeholder.com/150x150');
  17.       position: relative;
  18.       height: 150px;
  19.       width: 150px;
  20.       top: 5px;
  21.       left: 5px;
  22.       cursor: move;
  23.     }
  25.     /* 接收容器的样式 */
  26.     .droppable {
  27.       display: inline-block;
  28.       height: 160px;
  29.       width: 160px;
  30.       margin: 10px;
  31.       border: 3px salmon solid;
  32.       background-color: white;
  33.     }
  35.     /* 拖拽时的样式 */
  36.     .dragging {
  37.       border: 4px yellow solid;
  38.       cursor: move;
  39.     }
  41.     /* dragOver 拖拽接收的容器样式 */
  42.     .drag-over {
  43.       background-color: #f4f4f4;
  44.       border-style: dashed;
  45.     }
  47.     /* dragStart隐藏拖拽的元素 */
  48.     .visible {
  49.       display: none;
  50.     }
  51.   </style>
  52. </head>
  54. <body>
  55.   <div class="droppable">
  56.     <div class="draggable" draggable="true"></div>
  57.   </div>
  59.   <div class="droppable"></div>
  60.   <div class="droppable"></div>
  61.   <div class="droppable"></div>
  62.   <div class="droppable"></div>
  64.   <script>
  65.     let timer;
  66.     // 查询draggable和droppable
  67.     const draggable = document.querySelector('.draggable');
  68.     const droppables = document.querySelectorAll('.droppable'); // 接收的容器
  70.     // 监听 drag的相关事件
  71.     draggable.addEventListener('dragstart', dragStart);
  72.     draggable.addEventListener('dragend', dragEnd);
  75.     function dragStart(e) {
  76.       // 当前拖拽的元素添加拖拽样式
  77.       this.className += ' dragging';
  78.       timer = setTimeout(() => {
  79.         this.className += ' visible';
  80.       }, 0);
  81.     }
  83.     function dragEnd() {
  84.       this.className = 'draggable';
  85.       clearTimeout(timer);
  86.       console.log(timer)
  87.     }
  89.     // 监听 drop的相关事件
  90.     for (const droppable of droppables) {
  91.       droppable.addEventListener('dragover', dragOver); // 
  92.       droppable.addEventListener('dragleave', dragLeave); // 拖拽元素离开容器
  93.       droppable.addEventListener('dragenter', dragEnter); // 拖拽元素进入容器范围
  94.       droppable.addEventListener('drop', dragDrop); // 释放拖拽
  95.     }
  97.     // 高频事件，慎用
  98.     function dragOver(e) {
  99.       e.preventDefault();
  100.       console.log('over')
  101.     }
  103.     // 拖拽进入
  104.     function dragEnter(e) {
  105.       e.preventDefault();
  106.       console.log('enter')
  107.       this.className += ' drag-over';
  108.     }
  110.     // 拖拽离开
  111.     function dragLeave(e) {
  112.       console.log('leave')
  113.       this.className = 'droppable';
  114.     }
  116.     // 拖拽释放
  117.     function dragDrop(e) {
  118.       this.className = 'droppable';
  119.       this.append(draggable);
  120.       console.log('drop')
  121.     }
  122.   </script>
  123. </body>
  124. </html>