https://github.com/zxuqian/html-css-examples/blob/master/34-drag-drop-api/index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <style>
    8.       * {
    9.         box-sizing: border-box;
    10.         padding: 0;
    11.         margin: 0;
    12.       }
    14.       main {
    15.         width: 100vw;
    16.         height: 100vh;
    17.         display: grid;
    18.         grid-template-columns: 1fr 1fr;
    19.         place-items: center;
    20.         background-color: hsl(0deg, 0%, 10%);
    21.       }
    23.       .draggable-container {
    24.         width: 100%;
    25.         height: 100%;
    26.         display: grid;
    27.         place-items: center;
    28.       }
    30.       .draggable,
    31.       .droppable {
    32.         border-radius: 4px;
    33.       }
    35.       .draggable {
    36.         width: 25vw;
    37.         height: 25vw;
    38.         background: #00d9ff;
    39.       }
    41.       .droppable {
    42.         width: 30vw;
    43.         height: 30vw;
    44.         border: 8px dashed #00d9ff;
    45.         position: relative;
    46.         display: grid;
    47.         place-items: center;
    48.       }
    50.       .droppable::before {
    51.         display: block;
    52.         content: "请拖放到此区域";
    53.         position: absolute;
    54.         color: white;
    55.         font-family: sans-serif;
    56.         font-size: 3vw;
    57.         color: hsl(0, 0%, 30%);
    58.       }
    60.       .droppable img {
    61.         width: 80%;
    62.         height: 80%;
    63.         object-fit: contain;
    64.       }
    66.       .dragover {
    67.         border: 8px dashed #ffae00;
    68.       }
    70.       .dropped {
    71.         border: 8px dashed #48ff00;
    72.       }
    73.       .dropped::before {
    74.         z-index: -1;
    75.       }
    76.     </style>
    77.     <title>原生拖拽</title>
    78.   </head>
    79.   <body>
    80.     <main>
    81.       <div class="draggable-container">
    82.         <div id="draggable" class="draggable" draggable="true"></div>
    83.       </div>
    84.       <div id="droppable" class="droppable"></div>
    85.     </main>
    86.     <script>
    87.       const draggable = document.getElementById("draggable");
    88.       const droppable = document.getElementById("droppable");
    90.       draggable.addEventListener("dragstart", handleDragStart);
    91.       droppable.addEventListener("dragover", handleDragover);
    92.       droppable.addEventListener("dragleave", handleDragLeave);
    93.       droppable.addEventListener("drop", handleDrop);
    95.       function handleDragStart(e) {
    96.           console.log('222, ', e.dataTransfer.setData)
    97.         e.dataTransfer.setData("text/plain", e.target.id);
    98.         // 有 copy、move、和 auto 三种，分别是把鼠标指针
    99.         // 显示为复制样式（带+号）、移动样式，或自动设置样式
    100.         // e.dataTransfer.dropEffect = "move";
    101.       }
    103.       function handleDragover(e) {
    104.             console.log('111-11', e)
    105.         e.preventDefault();
    106.         droppable.classList.add("dragover");
    107.         // e.dataTransfer.dropEffect = "move";
    108.       }
    110.       function handleDragLeave(e) {
    111.         console.log('222-222', e)
    112.         droppable.classList.remove("dragover");
    113.       }
    115.       function handleDrop(e) {
    116.         console.log('333-33', e)
    117.         e.preventDefault();
    118.         // 如果是文件
    119.         [...e.dataTransfer.items].forEach((item) => {
    120.           if (item.kind === "file") {
    121.             const file = item.getAsFile();
    122.             createPreview(file);
    123.           }
    124.         });
    126.         // 如果是元素
    127.         const draggedId = e.dataTransfer.getData("text/plain");
    128.         droppable.appendChild(document.getElementById(draggedId));
    129.         droppable.classList.add("dropped");
    130.       }
    132.       function createPreview(imageFile) {
    133.         if (!imageFile.type.startsWith("image/")) {
    134.           return;
    135.         }
    137.         const image = document.createElement("img");
    138.         image.src = URL.createObjectURL(imageFile);
    139.         image.onload = function () {
    140.           URL.revokeObjectURL(this.src);
    141.         };
    142.         droppable.appendChild(image);
    143.       }
    144.     </script>
    145.   </body>
    146. </html>