JavaScript -- drop,drag的使用

拖拽网页图片：

h5的内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #box1{
            background-color: gray;
        }
    </style>
    <script src="app.js"></script>
</head>
<body>
    <div id="box1" class="box"></div>

    <img id="img1" src="1.png" width="200px" height="200px">

    <div id="msg"></div>
</body>
</html>

js文件内容：


var box1Div,msgDiv,img1;
window.onload = function(){

    // 得到块
    box1Div = document.getElementById("box1");
    msgDiv = document.getElementById("msg");

    img1 = document.getElementById("img1");
3
    //box1Div.ondragenter = function(e){
    //    showObj(e);
    //}

    box1Div.ondragover = function(e){
        e.preventDefault();
    }
    img1.ondragstart = function(e){
        e.dataTransfer.setData("imgID","img1");
    }

    // 取出数据后,把它放在要显示的点
    box1Div.ondrp = function(e){

        showObj(e.dataTransfer);
        e.preventDefault();
        // 创建新的节点
        var img = document.getElementById(e.dataTransfer.getData("imgID"));
        box1Div.appendChild(img);
    }
}

// 打印拖拽事件详情
function showObj(obj){
    var s = "";
    for(var k in obj){
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML = s;
}

拖拽本地文件至网页：

h5文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本地拖拽</title>
    <style>
        #imgContainer{
            background-color: red;
            width:500px;
            height: 500px;
        }
    </style>
    <script src="app1.js"></script>
</head>
<body>
    <div id="imgContainer"></div>
    <div id="msg"></div>
</body>
</html>

JS文件中：


var imgContainer,msgDiv;

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

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

        e.preventDefault();
        //showObj(e);

        var f = e.dataTransfer.files[0];
        var fileReader = new FileReader();
        fileReader.onload = function(e){
            showObj(e);
            imgContainer.innerHTML = "<img src= \""+fileReader.result+"\">"
        }
        fileReader.readAsDataURL(f);
    }
}

function showObj(obj){
    var s = "";
    for(var k in obj){
        s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML = s;
}

JavaScript -- drop,drag的使用

猜你喜欢