《初级前端1.11》HTML5拖放——drag,drop,FileReader

在HTML5中，拖放是标准的一部分，任何元素都能够拖放。

核心内容：使用HTML5新特性，完成资源拖放，放置位置。

 

HTML5拖放

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 400px;
            float: left;
        }
        #box1{
            background: #ccc;
        }
        #box2{
            background: #CFE0F8;
        }
    </style>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <img id="img1" src="tx.png" height="200" width="200">
</body>
</html>

app.js:

var box1Div, box2Div, msgDiv, img1;

window.onload = function() {
    box1Div = document.getElementById("box1");
    box2Div = document.getElementById("box2");
    msgDiv = document.getElementById("msg");
    img1 = document.getElementById("img1");

    // box1Div.ondragenter = function(e){
    //     showObj(e);
    // }

    box1Div.ondragover = function(e) {
        e.preventDefault();
    }
    box2Div.ondragover = function(e) {
        e.preventDefault();
    }

    img1.ondragstart = function(e) {
        e.dataTransfer.setData("imgId", "img1");    //设置被拖动的元素
        //console.log(e.target);
    }

    //落点元素的处理方法
    box1Div.ondrop = dropImghandler;
    box2Div.ondrop = dropImghandler;

}

function dropImghandler(e) {
    console.log(e);

    var img = document.getElementById(e.dataTransfer.getData("imgId"));    //获取被拖动的元素的id
    e.target.appendChild(img);    //e.target表示落点元素，将被拖动的元素添加到落点元素中
}

效果：

 ===> 

 

 

HTML5拖放本地资源

拖放本地资源，不同于网页元素（不使用ondragstart和setData,getData）。它是用了FileReader获取本地资源的信息，转化成base64的url，来写入到网页元素中。

我们来看下面的例子：

index1.hmtl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放本地资源</title>
    <style type="text/css">
        #imgContainer{
            background: #ccc;
            width: 500px;
            height: 500px;
        }
    </style>
    <script type="text/javascript" src="app1.js"></script>
</head>
<body>
    <div id="imgContainer"></div>
</body>
</html>

app1.js

var imgContainer;

window.onload = function(){
    imgContainer = document.getElementById("imgContainer");

    imgContainer.ondragover = function(e){
        e.preventDefault();
    }

    //拖动本地资源并放到元素中时，调用fileReader的onload方法，
    //获取图片信息并显示到元素中
    imgContainer.ondrop = function(e){
        e.preventDefault();
        // console.log(e.dataTransfer.files);
        console.log(e.dataTransfer.files[0]);
        var f = e.dataTransfer.files[0];
        var fileReader = new FileReader();
        fileReader.onload = function(e){
            // console.log(e.target);
            // e.target是一个filereader，其中result是图片的base64信息
            console.log(e.target.result);    //base64编码的图片信息
            imgContainer.innerHTML = "<img src='" + fileReader.result + "'>";
        }
        fileReader.readAsDataURL(f);
    }
}

效果：

posted @ 2016-02-23 22:13  暖风叔叔  阅读(308)  评论(0)    收藏  举报