html5規(guī)定元素是否可拖動(dòng)的屬性draggable怎么用

小編給大家分享一下html5規(guī)定元素是否可拖動(dòng)的屬性draggable怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),三都企業(yè)網(wǎng)站建設(shè),三都品牌網(wǎng)站建設(shè),網(wǎng)站定制,三都網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,三都網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

實(shí)例

一個(gè)可拖動(dòng)的段落：

<p draggable="true">這是一個(gè)可拖動(dòng)的段落。</p>

瀏覽器支持

IE

Firefox

Chrome

Safari

Opera

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari 支持 draggable 屬性。

注釋：Internet Explorer 8 以及更早的版本，不支持 draggable 屬性。

定義和用法

draggable 屬性規(guī)定元素是否可拖動(dòng)。

提示：鏈接和圖像默認(rèn)是可拖動(dòng)的。

提示：draggable 屬性常用在拖放操作中。請(qǐng)?jiān)谖覀兊耐戏沤坛讨袑W(xué)習(xí)更多內(nèi)容。

HTML 4.01 與 HTML5 之間的差異

draggable 屬性是 HTML5 中的新屬性。

語(yǔ)法

<element draggable="true|false|auto">

屬性值

值描述
true規(guī)定元素的可拖動(dòng)的。
false規(guī)定元素不可拖動(dòng)。
auto使用瀏覽器的默認(rèn)行為。

實(shí)例：

<!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">
            /*
             * 雖然已經(jīng)設(shè)定了img元素可被拖動(dòng)，但是瀏覽器默認(rèn)地，無(wú)法將數(shù)據(jù)/元素放置到其他元素中。
             * 如果有需要設(shè)置某些元素可接受被拖動(dòng)元素，則要阻止它的默認(rèn)行為，
             * 這要通過(guò)設(shè)置該接收元素的ondragover 事件，調(diào)用event.preventDefault() 方法
             */
            function allowDrop(ev) {
                ev.preventDefault(); //阻止默認(rèn)行為
                
                //ev.target.id
                //此處ev.target是接收元素，通過(guò)事件被綁定在哪個(gè)元素即可區(qū)分
            }

            /*
             * 當(dāng)該img元素被拖動(dòng)時(shí)，會(huì)觸發(fā)一個(gè)ondragstart 事件，該事件調(diào)用了一個(gè)方法drag(event)。
             */
            function drag(ev) {
                //ev.dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型（Text）和值（被拖元素id），
                //該方法將被拖動(dòng)元素的id存儲(chǔ)到事件的dataTransfer對(duì)象內(nèi)，ev.dataTransfer.getData()可將該元素取出。
                //此處ev.target是被拖動(dòng)元素
                ev.dataTransfer.setData("Text", ev.target.id); 
            }

            /*
             * 當(dāng)被拖元素移動(dòng)到接收元素，
             * 松開(kāi)鼠標(biāo)時(shí)（即被拖元素放置在接收元素內(nèi)時(shí)）會(huì)出發(fā)ondrop事件
             */
            function drop(ev) {
                ev.preventDefault(); //阻止默認(rèn)行為
                var data = ev.dataTransfer.getData("Text"); //將被拖動(dòng)元素id取出
                ev.target.appendChild(document.getElementById(data)); //將被拖動(dòng)元素添加到接收元素尾部
            }
        </script>
    </head>

    <body>

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <!--為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true--> 
            <img src="/upload/otherpic50/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>

html5規(guī)定元素是否可拖動(dòng)的屬性draggable怎么用                                html5規(guī)定元素是否可拖動(dòng)的屬性draggable怎么用

以上是“html5規(guī)定元素是否可拖動(dòng)的屬性draggable怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

標(biāo)題名稱：html5規(guī)定元素是否可拖動(dòng)的屬性draggable怎么用
文章路徑：http://muchs.cn/article34/gdippe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站維護(hù)、網(wǎng)頁(yè)設(shè)計(jì)公司、ChatGPT、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)