HTML5 属性の draggable は要素がドラッグ可能かどうかを指定します

黄舟
リリース: 2017-11-03 10:52:34
オリジナル
4431 人が閲覧しました

ドラッグ可能な段落:

<p draggable="true">这是一个可拖动的段落。</p>
ログイン後にコピー

ブラウザサポート


IE

Firefox

Chrome

Safari

Opera


Internet Explorer 9以降、 Opera、Chrome、Safari のサポートドラッグ可能な属性。

: Internet Explorer 8 以前のバージョンは、ドラッグ可能属性をサポートしていません。

定義と使用法

draggable 属性は、要素をドラッグできるかどうかを指定します。

ヒント: リンクと画像はデフォルトでドラッグ可能です。

ヒント: ドラッグ可能属性は、ドラッグ アンド ドロップ操作でよく使用されます。詳細については、ドラッグ アンド ドロップのチュートリアルをご覧ください。

HTML 4.01とHTML5の違い

draggable属性はHTML5の新しい属性です。

構文

<element draggable="true|false|auto">
ログイン後にコピー

属性値

Value説明
tru​​e 要素がドラッグ可能であることを指定します。
falseは、要素をドラッグできないことを指定します。
autoブラウザのデフォルトの動作を使用します。

例:

<!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" / alt="HTML5 属性の draggable は要素がドラッグ可能かどうかを指定します" >
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>
ログイン後にコピー

HTML5 属性の draggable は要素がドラッグ可能かどうかを指定します

以上がHTML5 属性の draggable は要素がドラッグ可能かどうかを指定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート