天天看點
傳回

HTML5學習筆記之拖放HTML5學習筆記之拖放

HTML5學習筆記之拖放

對于HTML5，拖放是一個标準的一部分，任何元素都是可以被拖放的。 HTML5的拖放功能是通過JS來實作的，在通過對标簽元素的擷取，在JS中通過對需要拖放的位置調用函數ondragover，禁止浏覽器的預設事件，設定被拖放元素的id，調用函數實作拖放。

<span style="white-space: pre;"></span><pre name="code" class="html">//demo01.html
           
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>拖放</title>
    <style>
        .box{
            width: 400px;
            height: 400px;
        }
        #div01{
            float: left;
            background-color: aquamarine;
        }
        #div02 {
            float: left;
            background-color: deeppink;
        }
    </style>
    <script src="Demo01.js"></script>
</head>
<body>
    <div id="div01" class="box"></div>
    <div id="div02" class="box"></div>
    <img src="img01.jpg" id="img01">
    <div id="msg" style="clear: both;"></div>
</body>
</html>

相關JS代碼：

<pre name="code" class="javascript">//demo01.js
           
var div01,msgDiv,img01;

window.onload = function(){
    div01 = document.getElementById("div01");
    div02 = document.getElementById("div02");
    msgDiv = document.getElementById("msg");
    img01 = document.getElementById("img01");

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

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

    img01.ondragstart = function(e){
        e.dataTransfer.setData("imgId","img01");
    }

    div01.ondrop = dropImghandler;
    div02.ondrop = dropImghandler;

}

function dropImghandler(e){
    showObj(e);
    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;
}

浏覽器執行結果：

HTML5學習筆記之拖放HTML5學習筆記之拖放
html5 拖放
上一篇: HTML5 拖放事件及對象
下一篇: 利用 canvas 破解 某拖動驗證碼

繼續閱讀