zoukankan      html  css  js  c++  java
  • Web API

    Selecting files using drag and drop

    You can also let the user drag and drop files into your web application.

    The first step is to establish a drop zone. Exactly what part of your content will accept drops may vary depending on the design of your application, but making an element receive drop events is easy:

    let dropbox;
    
    dropbox = document.getElementById("dropbox");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);
    

    In this example, we're turning the element with the ID dropbox into our drop zone. This is done by adding listeners for the dragenter, dragover, and drop events.

    We don't actually need to do anything with the dragenter and dragover events in our case, so these functions are both simple. They just stop propagation of the event and prevent the default action from occurring:

    function dragenter(e) {
      e.stopPropagation();
      e.preventDefault();
    }
    
    function dragover(e) {
      e.stopPropagation();
      e.preventDefault();
    }
    

    The real magic happens in the drop() function:

    function drop(e) {
      e.stopPropagation();
      e.preventDefault();
    
      const dt = e.dataTransfer;
      const files = dt.files;
    
      handleFiles(files);
    }
    

    Here, we retrieve the dataTransfer field from the event, pull the file list out of it, and then pass that to handleFiles(). From this point on, handling the files is the same whether the user used the input element or drag and drop.


    拖曳选择文件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Selecting files using drag and drop</title>
            <style type="text/css">
                #dropbox {
                     100px;
                    height: 100px;
                    box-sizing: border-box;
                    border: 1px solid #000000;
                }
            </style>
        </head>
        <body>
            <div id="dropbox"></div>
    
            <script type="text/javascript">
                let dropbox = document.getElementById("dropbox");
    
                dropbox.addEventListener("dragenter", function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                }, false);
    
                dropbox.addEventListener("dragover", function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                }, false);
    
                dropbox.addEventListener("drop", function(e) {
                    e.stopPropagation();
                    e.preventDefault();
    
                    const dataTransfer = e.dataTransfer;
                    const files = dataTransfer.files;
    
                    console.log(dataTransfer)
                    console.log(files);
                }, false);
            </script>
        </body>
    </html>
    

    参考

    Selecting files using drag and drop

  • 相关阅读:
    输入url到页面渲染发生了什么
    echarts缓存处理
    jquery 使用mock
    vue axios的封装
    css3实现盒子宽度随文字宽度自适应
    VUE中使用bus传值时,接收页面多次触发接收方法的问题
    原生js 文件 上传 下载封装
    微信小程序使用第三方包
    为什么我们要使用Async、Await关键字
    服务大众的人工智能---认知服务
  • 原文地址:https://www.cnblogs.com/Satu/p/14643360.html
Copyright © 2011-2022 走看看