HTML5拖放_var box = document.getelementbyid('box'); box.ondr-CSDN博客

本文链接：https://blog.csdn.net/chenyufeng1991/article/details/48782999

1.HTML5拖放：

拖放(drag ,drop)是HTML5标准的组成部分。

2.拖动开始：

ondragstart:调用了一个函数，drag(event),它规定了被拖动的数据。

3.设置拖放数据：

setData():设置被拖放的数据类型和值。

4.放入位置：

ondragover:事件规定在何处放置被拖动的数据。

5.放置：

ondrop:当放置被拖动数据时，会发生drop事件。

实例代码如下：

（1）HTML文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
        <style>
            .box{
                width: 400px;
                height: 400px;
            }

            #box1{
                background-color: #cccccc;
                float: left;
            }

            #box2{
                background-color: aquamarine;
                float: left;
            }

        </style>
    <script src="app.js"></script>

</head>
<body>

    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <img id="img1" src="1.png">
    <div id="msg"></div>

</body>
</html>

（2）JS文件代码如下：

/**
 * Created by chenyufeng on 15/9/28.
 */


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");

    };

    box1Div.ondrop = dropImghandler;
    box2Div.ondrop = dropImghandler;

};

function dropImghandler(e){
    showObj(e.dataTransfer);

    e.preventDefault();

    //
    var img = document.getElementById(e.dataTransfer.getData("imgId"));
    e.target.appendChild(img);
}

function showObj(obj){

    var s = "";
    for(var k in obj){

        s+=k+":"+obj[k]+"<br/>"

    }
    msgDiv.innerHTML = s;
}

实现效果如下：

。