Heim > Artikel > Web-Frontend > Das HTML5-Attribut Draggable gibt an, ob ein Element ziehbar ist

Das HTML5-Attribut Draggable gibt an, ob ein Element ziehbar ist

黄舟Original: 2017-11-03 10:52:344369Durchsuche

Beispiel

Ein ziehbarer Absatz:

<p draggable="true">这是一个可拖动的段落。</p>

Browser-Unterstützung

Firefox

Chrome

Safari

Opera

Internet Explorer 9+, Firefox, Opera, Chrome und Safari unterstützen das Ziehen Attribut.

Hinweis: Internet Explorer 8 und frühere Versionen unterstützen das ziehbare Attribut nicht.

Definition und Verwendung

Das Draggable-Attribut gibt an, ob das Element gezogen werden kann.

Tipp: Links und Bilder sind standardmäßig ziehbar.

Tipp: Das Draggable-Attribut wird häufig bei Drag-and-Drop-Vorgängen verwendet. Erfahren Sie mehr in unserem Drag-and-Drop-Tutorial.

Unterschiede zwischen HTML 4.01 und HTML5

Das ziehbare Attribut ist neu in HTML5.

Syntax

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

Attributwert

值	描述
true	规定元素的可拖动的。
false	规定元素不可拖动。
auto	使用浏览器的默认行为。

Beispiel:

<!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="Das HTML5-Attribut Draggable gibt an, ob ein Element ziehbar ist" >
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>

Das HTML5-Attribut Draggable gibt an, ob ein Element ziehbar ist

Das obige ist der detaillierte Inhalt vonDas HTML5-Attribut Draggable gibt an, ob ein Element ziehbar ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Daten-*-Attribute, die private benutzerdefinierte Daten für eine Seite oder Anwendung speichernNächster Artikel：HTML5-Daten-*-Attribute, die private benutzerdefinierte Daten für eine Seite oder Anwendung speichern

In Verbindung stehende Artikel

Mehr sehen