使用原生JS Drag&Drop API实现可视化拖拽和文件拖放操作

最新推荐文章于 2024-05-10 11:08:56 发布

小半Annie

最新推荐文章于 2024-05-10 11:08:56 发布

阅读量905

点赞数 1

分类专栏：前端小tips 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/zthtt/article/details/122394257

版权

前端小tips 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、知识储备
1.可拖拽元素

<div id="draggable" class="draggable" draggable="true" ondrag="handleDrag"></div>
1.draggable="true"
2.ondrag 开始拖拽事件，可存放拖拽数据，例如元素ID

2.可放置区域

<div id="droppable" class="droppable" ondragover="handleDragOver" ondrop="handleDrop"></div> 
1.必须设置e.preventDefault()阻止默认事件，因为浏览器对拖拽事件的默认处理方式的禁止的
2.ondragover 当拖拽元素进入到放置区域时触发的事件，可以更改样式等操作
3.ondrop 是拖拽元素放置后触发的事件，对拖拽元素进行真实的移动

二、代码实现
这里实现了两种操作
1.将div拖拽到指定区域
2.将图片拖拽到指定区域并预览

<!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>Document</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: hsl(0deg, 0%, 20%);
    }
    .dragable-container{
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
    }
    .draggable,.droppable{
      border-radius: 4px;
    }
    .draggable{
      width: 25vw;
      height: 25vh;
      background-color: #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%);
    }
    .dragover{
      border: 8px dashed #ffae00;
    }
    .dropped{
      border: 8px dashed #48ff00;
    }
    .dropped::before{
     z-index: -1;
    }
    .droppable img{
      width: 80%;
      height: 80%;
      object-fit: contain;
    }
  </style>
</head>
<body>
    <main>
      <div class="dragable-container">
        <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',handleDrag)
      function handleDrag(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();
            createPreview(file);
          }
        })
      }
      function createPreview(imageFile){
        //对拖拽元素进行格式判断
        if(!imageFile.type.startsWith("/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>

三、效果
在这里插入图片描述

小半Annie

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
使用原生JS Drag&Drop API实现可视化拖拽和文件拖放操作

一、知识储备1.可拖拽元素<div id="draggable" class="draggable" draggable="true" ondrag="handleDrag"></div>1.draggable="true"2.ondrag 开始拖拽事件，可存放拖拽数据，例如元素ID2.可放置区域<div id="droppable" class="droppable" ondragover="handleDragOver" ondrop="handleDrop"
复制链接

扫一扫