html5實現本頁面元素拖放和本地文件拖放

本文轉載自查看原文 2017-04-01 13:25 1892 本地文件拖放/ 拖放/ html5/ Html5/ 本頁面元素拖放

HTML5拖放

拖放本地數據

1.HTML拖放

拖放（Drag 和 Drop）是HTML5標准的組成部分

2.拖放開始：

ondragStart:調用了一個函數，drag(event),它規定了被拖動的數據

3.設置拖動數據：

setDate():設置被拖動數據的數據類型和值

4.放入位置：

ondragover:事件規定在何處放置被拖動的數據

5.放置：

ondrop：當放置被拖數據時，或發生drop事件

html5實現本頁面元素拖放

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>拖放本頁面數據</title>
        <style>
            .box {
                width: 400px;
                height: 400px;
            }
            
            #box2 {
                float: left;
                background-color:black;
            }
            #box1 {
                float: left;
                background-color: #cccccc;
            }
        </style>
    </head>

    <body>
        <div id="box1" class="box"></div>
        <div id="box2" class="box"></div>
        <img id="img1" src="img/xk.png" width="100px" height="100px" />
        <div id="msg"></div>
        <script>
            var box1Div,box2Div, msgDiv, imgDiv1;
            window.onload = function() {
                box1Div = document.getElementById("box1");
                box2Div = document.getElementById("box2");
                msgDiv = document.getElementById("msg");
                imgDiv1 = document.getElementById("img1");
                /*box1Div.ondragenter = function(e){//當拖曳元素進入目標元素的時候觸發的事件，此事件作用在目標元素上
                    showObj(e);
                }*/
                box1Div.ondragover = function(e) { //拖拽元素在目標元素上移動的時候觸發的事件，此事件作用在目標元素上
                    e.preventDefault();
                }
                
                box2Div.ondragover = function(e) { //拖拽元素在目標元素上移動的時候觸發的事件，此事件作用在目標元素上
                    e.preventDefault();
                }

                imgDiv1.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;
            }
        </script>
    </body>

</html>

頁面元素拖放效果：

html5實現本地文件拖放

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>拖放本地數據</title>
        <style>
            #imgContainer{
                background-color: #CCCCCC;
                width: 500px;
                height: 500px;
            }
        </style>
    </head>

    <body>
        <div id="imgContainer"></div>
        <div id="msg"></div>
        <script>
            var imgContainer;
            var msgDiv;
            window.onload = function(){
                imgContainer = document.getElementById("imgContainer");
                msgDiv = document.getElementById("msg");
                imgContainer.ondragover = function(e){
                    e.preventDefault();
                }
                imgContainer.ondrop = function(e){
                    e.preventDefault();
                    var fileObj = e.dataTransfer.files[0];
                    var fileReader = new FileReader();
                    fileReader.onload = function(e){
                        showObj(e.target);
                        imgContainer.innerHTML = "<img src='"+e.target.result+"' width='100px' height='100px' />"
                    }
                    fileReader.readAsDataURL(fileObj);
                }
            }
            function showObj(obj) {
                var s = "";
                for(var k in obj) {
                    s += k + ":" + obj[k] + "<br/>";
                }
                msgDiv.innerHTML = s;
            }
        </script>
    </body>

</html>

本地文件拖放效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5實現頁面元素拖放如何使用HTML5實現文件拖放 : HTML5 進階系列：拖放 API 實現拖放排序 HTML5 拖放及排序的簡單實現 HTML5 拖放及排序的簡單實現 HTML5中實現拖放效果 HTML5拖放與文件操作api，實現拖拽上傳文件功能 html5 拖放事件 HTML5讀取本地文件 HTML5 的拖放（實例：兩個div之間拖放圖片）