您的位置：首页 > Web前端 > HTML5

html5拖放

2016-03-17 10:38 676 查看

1.HTML5拖放：

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

2.拖动开始：

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

3.设置拖放数据：

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

4.放入位置：

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

5.放置：

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

实例代码如下：

（1）HTML文件代码如下：

[html] view
plain copy

print ?

<!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文件代码如下：

[javascript] view
plain copy

print ?

/**

* 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;

}

实现效果如下：

。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航