JavaScript拖拽功能 ---每天一个小学习

冷唐
165 阅读1分钟

前言

HtML5 的新特性 draggable 可以使得页面上的对象可以被拖放

拖拽对应步骤

选中阶段

在HTML5中，设置元素可以被拽动，把draggable属性设置为true。
其中文本、图片和链接默认是可以被拖拽的，它们的属性默认为true。
拖拽链接和图片只需要鼠标左键点住并进行拽动就可以。
而文本则需要提前选中才可以进行。但设置文本的时候draggable为true，也可以像图片一样进行拖拽
拖拽属性设置语法：<div draggable = "true| false| auto"></div>

  • true：可以拖拽
  • false：禁止拖拽
  • auto：跟随浏览器默认属性

拖动阶段

拖动阶段主要分为两个部分：拖动时和进入区域

拖动时

开始dragstart元素开始被拖动时触发
进行中drag元素被反复拖动时
结束dragend拖动操作结束

进入区域

进入时dragenter拖动元素进入目的元素时触发
进入后dragover被拖动元素到目的元素内触发
离开dragleave被拖动元素离开目的元素时触发
放置drop拖动元素放置在目的元素时触发

dragenter和dragover的事件默认拒绝接受任何被拖放元素。因此，我们必须组织浏览器默认行为。e.preventDefault()

###实验实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>原生拖拽</title>
  <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>
</head>
<body>
  <main>
    <div class="draggable-conctainer">
      <div id="draggable" class="draggable" draggable="true"></div>
    </div>
    <div id="droppable" class="droppable"></div>
  </main>
  <script>
    const draggable = document.getElementById("draggable");
    const droppable =document.getElementById("droppable");

    draggable.addEventListener("dragstart",handleDragStart);
    function handleDragStart(e){
      e.dataTransfer.setData('text/plain',e.target.id);
    }

    droppable.addEventListener('dragover',handleDragover)
    function handleDragover(e) {
      e.preventDefault();
      droppable.classList.add('dragover')
    }
    droppable.addEventListener("dragleave",handleDragLeave)
    function handleDragLeave(e) {
      droppable.classList.remove("dragover")
    }
    droppable.addEventListener("drop", handleDrop);
    function handleDrop(e) {
      e.preventDefault();
      // const draggedId =e.dataTransfer.getData("text/plain")
      // droppable.appendChild(document.getElementById(draggedId))
      droppable.classList.add("dropped");

      [...e.dataTransfer.items].forEach((item)=>{
        if(item.kind === "file"){
          const file = item.getAsFile();
          creatPreview(file)
        }
      })
    }

    function creatPreview(imageFile) {
      if(!imageFile.type.strasWith("image/")){
        return
      }

      const image = document.createElement("img");
        image.src = URL.createObjectURL(imageFile);
        image.onload = function () {
          URL.revokeObjectURL(this.src);
        };
        droppable.appendChild(image);
    }
  </script>
</body>
</html>
avatar
文章
阅读
粉丝