原生拖拽预览图片

实现一个可以拖拽的工程，并且可以显示图片

css 部分

  <style>
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }

      main {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr 1fr;
        place-items: center;
        background-color: hsl(0deg, 0%, 10%);
      }

      .draggable-container {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
      }

      .draggable,
      .droppable {
        border-radius: 4px;
      }

      .draggable {
        width: 25vw;
        height: 25vw;
        background: #00d9ff;
      }

      .droppable {
        width: 30vw;
        height: 30vw;
        border: 8px dashed #00d9ff;
        position: relative;
        display: grid;
        place-items: center;
      }

      .droppable::before {
        display: block;
        content: "请拖放到此区域";
        position: absolute;
        color: white;
        font-family: sans-serif;
        font-size: 3vw;
        color: hsl(0, 0%, 30%);
      }

      .droppable img {
        width: 80%;
        height: 80%;
        object-fit: contain;
      }

      .dragover {
        border: 8px dashed #ffae00;
      }

      .dropped {
        border: 8px dashed #48ff00;
      }
      .dropped::before {
        z-index: -1;
      }
    </style>

html 部分

 <main>
      <div class="draggable-container">
        <div id="draggable" class="draggable" draggable="true"></div>
      </div>
      <div id="droppable" class="droppable"></div>
    </main>

js部分

const draggable = document.getElementById("draggable");
      const droppable = document.getElementById("droppable");
      // 从源头开始拖动
      draggable.addEventListener("dragstart", handleDragStart);
      // 拖动到的目标元素 进行监听
      droppable.addEventListener("dragover", handleDragover);
      // 离开拖动元素
      droppable.addEventListener("dragleave", handleDragLeave);
      // 鼠标放下 或者 esc
      droppable.addEventListener("drop", handleDrop);

      function handleDragStart(e) {
      // 这个地方我理解的地方就是 存储数据，把数据放到这个 拖动的元素上
      // 不一定使用 text/plain
        e.dataTransfer.setData("text/plain", e.target.id);
        // 有 copy、move、和 auto 三种，分别是把鼠标指针
        // 显示为复制样式（带+号）、移动样式，或自动设置样式
        // e.dataTransfer.dropEffect = "copy";
      }

      function handleDragover(e) {
      // 因为浏览器默认是不会进行允许拖动的，阻止默认行为
        e.preventDefault();
        droppable.classList.add("dragover");
        e.dataTransfer.dropEffect = "copy";
      }

      function handleDragLeave(e) {
        droppable.classList.remove("dragover");
      }

      function handleDrop(e) {
        e.preventDefault();
        console.log(e.dataTransfer.files);
        // 如果是文件
        [...e.dataTransfer.items].forEach((item) => {
          if (item.kind === "file") {
            const file = item.getAsFile();
            createPreview(file);
          }
        });
        e.dataTransfer.getData("text/plain");

        // 如果是元素
        const draggedId = e.dataTransfer.getData("text/plain");
        if (document.getElementById(draggedId)) {
          droppable.appendChild(document.getElementById(draggedId));
          droppable.classList.add("dropped");
        }
      }

      function createPreview(imageFile) {
        if (!imageFile.type.startsWith("image/")) {
          return;
        }
        const image = document.createElement("img");
        image.src = URL.createObjectURL(imageFile);
        // https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications#example.3a_using_object_urls_to_display_images
        console.log(URL.createObjectURL(imageFile), "src");
        image.onload = function () {
          URL.revokeObjectURL(this.src);
        };
        // 如果不想把原来的元素删除，继续保留的话，需要 cloneNode
        // if (e.target.contains(image)) {
        //  return;
        // }
        //  const cloneNode = image.cloneNode();
        // note:候补
        droppable.appendChild(image);
      }

note:mdn上的例子 ; B站来源 ;mdn drag ;mdn createObjectURL ,mdn cloneNode time:2022.5.22 7:14