Maison > interface Web > Tutoriel H5 > le corps du texte

L'attribut HTML5 draggable spécifie si un élément peut être déplacé.

黄舟
Libérer: 2017-11-03 10:52:34
original
4433 Les gens l'ont consulté

Exemple

Un paragraphe déplaçable :

<p draggable="true">这是一个可拖动的段落。</p>
Copier après la connexion

Prise en charge du navigateur


IE

Firefox

Chrome

Safari

Opera


Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge le déplaçable attribut.

Remarque : Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'attribut draggable.

Définition et utilisation

L'attribut draggable spécifie si l'élément peut être déplacé.

Conseil : les liens et les images peuvent être déplacés par défaut.

Astuce : L'attribut draggable est couramment utilisé dans les opérations de glisser-déposer. Apprenez-en davantage dans notre didacticiel glisser-déposer.

Différences entre HTML 4.01 et HTML5

L'attribut draggable est nouveau en HTML5.

Syntaxe

<element draggable="true|false|auto">
Copier après la connexion

Valeur d'attribut

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

Exemple :

<!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="L'attribut HTML5 draggable spécifie si un élément peut être déplacé." >
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>
Copier après la connexion

Lattribut HTML5 draggable spécifie si un élément peut être déplacé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal