HTML5拖拽實例

oofw5751 8年前發布 | 4K 次閱讀 JavaScript HTML5

tuozhuai2.html ~ 4KB          

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            #box{width: 300px;height: 300px;border: 1px solid red;}
            #box li{list-style: none;font-size: 20px;line-height: 20px;background: #ccc;
                    width: 100px;height: 20px;margin: 10px 0;}
            #con{width: 300px;height: 300px;border: 1px solid #888;}
            #con li{list-style: none;font-size: 20px;line-height: 20px;background: #ccc;
                    width: 100px;height: 20px;margin: 10px 0;}
            </style>
            <script>
                window.onload = function () {
                    var box = document.getElementById('box');
                    var con = document.getElementById('con');
                    var lis = document.getElementsByTagName('li');
                    for (var i = 0; i < lis.length; i++) {

                        lis[i].draggable = true;
                        lis[i].flag = false;

                        lis[i].ondragstart = function () {
                            this.flag = true;
                        }
                        lis[i].ondragend = function () {
                            this.flag = false;
                        }

                    }
                    // A.ondragenter：當拖拽對象進入投放區時觸發； 
                    //B.ondragover：拖拽對象在投放區內移動時觸發；
                    //C.ondragleave：拖拽對象沒有投放到投放區，離開投放區的時候觸發；
                    //D.ondrop：拖拽對象投放在投放區時觸發。
                    box.ondragenter = function (e) {
                        e.preventDefault();
                    }
                    box.ondragover = function (e) {
                        e.preventDefault();
                    }
                    box.ondragleave = function (e) {
                        e.preventDefault();
                    }
                    box.ondrop = function (e) {
                        for (var i = 0; i < lis.length; i++) {
                            if (lis[i].flag) {
                                box.appendChild(lis[i]);
                            }

                        }
                        e.preventDefault();
                    }
//                    hh
                    con.ondragenter = function (e) {
                        e.preventDefault();
                    }
                    con.ondragover = function (e) {
                        e.preventDefault();
                    }
                    con.ondragleave = function (e) {
                        e.preventDefault();
                    }
                    con.ondrop = function (e) {
                        for (var i = 0; i < lis.length; i++) {
                            if (lis[i].flag) {
                                con.appendChild(lis[i]);
                            }

                        }
                        e.preventDefault();
                    }

                    if(null == undefined){alert('ok');}
                }
            </script>
        </head>
        <body>
            <div id="box"></div>

        <div id="con">
            <li>后盾php</li>
            <li>后盾js</li>
            <li>后盾html</li>
            <li>后盾css3</li>
            <li>后盾jq</li>

        </div>


    </body>
</html>
 本文由用戶 oofw5751 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！