h5-api-图片拖拽

作者: zjxl | 来源:发表于2017-06-11 22:59 被阅读0次

h5-api-图片拖拽
HTML 5 拖拽
图片拖拽
图片拖拽
HTML5 拖拽事件
HTML5拖拽事件
拖拽API
2019-05-20
Antd Upload图片墙拖拽改造
第十一周第二天笔记之照片墙实例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #box{
                width:100%;
                height:400px;
                background:#eee;
                margin:10px 0px;
            }
            #box img{
                margin:5px;
                max-height: 150px;
            }
            .over{
                border:2px dashed #ccc;
                transform: scale(0.9, 0.9);
            }
        </style>
    </head>
    <body>
        <h3>请把文件夹中的图片拖到下面区域</h3>
        <div id="box"></div>
    <script>        
            //获取目标元素
            var box = document.querySelector("#box");

            //给目标元素绑定事件
            box.addEventListener("dragenter", function(){
                this.classList.add('over');
            }, false);

            box.addEventListener("dragleave", function(){
                this.classList.remove("over");
            }, false);

            box.addEventListener("dragover", function(e){
                e.preventDefault();
            }, false);

            box.addEventListener("drop", function(e){
                e.preventDefault(); 

                //遍历FileList
                [].forEach.call(e.dataTransfer.files, function(itemFile){
                    //读取文件
                    readImage(itemFile);
                })

                this.classList.remove("over");  
            },false);
            function readImage(fileObj) {
                var frObj = new FileReader();
                frObj.onload = function(){
                    var img = document.createElement("img");
                    img.src = frObj.result;
                    document.querySelector("#box").appendChild(img);
                }
                frObj.readAsDataURL(fileObj);
            }   
        </script>
    </body>
    </html>