HTML5-draggable(拖放)

時間 2019-11-11
原文原文鏈接
<!DOCTYPE html>
<html class="no-js">

    <head>
        <meta charset="utf-8">
        <title>HTML5-draggable(拖放)</title>
        <style type="text/css">
            #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
        </style>
        <script src="js/modernizr.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            /*
             * 雖然已經設定了img元素可被拖動，可是瀏覽器默認地，沒法將數據/元素放置到其餘元素中。
             * 若是有須要設置某些元素可接受被拖動元素，則要阻止它的默認行爲，
             * 這要經過設置該接收元素的ondragover 事件，調用event.preventDefault() 方法
             */
            function allowDrop(ev) {
                ev.preventDefault(); //阻止默認行爲
                
                //ev.target.id
                //此處ev.target是接收元素，經過事件被綁定在哪一個元素便可區分
            }

            /*
             * 當該img元素被拖動時，會觸發一個ondragstart 事件，該事件調用了一個方法drag(event)。
             */
            function drag(ev) {
                //ev.dataTransfer.setData() 方法設置被拖數據的數據類型（Text）和值（被拖元素id），
                //該方法將被拖動元素的id存儲到事件的dataTransfer對象內，ev.dataTransfer.getData()可將該元素取出。
                //此處ev.target是被拖動元素
                ev.dataTransfer.setData("Text", ev.target.id); 
            }

            /*
             * 當被拖元素移動到接收元素，
             * 鬆開鼠標時（即被拖元素放置在接收元素內時）會出發ondrop事件
             */
            function drop(ev) {
                ev.preventDefault(); //阻止默認行爲
                var data = ev.dataTransfer.getData("Text"); //將被拖動元素id取出
                ev.target.appendChild(document.getElementById(data)); //將被拖動元素添加到接收元素尾部
            }
        </script>
    </head>

    <body>

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <!--爲了使元素可拖動，把 draggable 屬性設置爲 true--> 
            <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。