recherche

Maison >interface Web >Tutoriel H5 >Le chemin de Xiaoqiang vers le développement mobile HTML5 (16) – la fonction magique glisser-déposer

Le chemin de Xiaoqiang vers le développement mobile HTML5 (16) – la fonction magique glisser-déposer

黄舟
黄舟original
2017-01-22 11:50:181207parcourir

Avec le développement rapide des smartphones, la fonction glisser-déposer est devenue une mode, mais cette fonction pratique et rapide manque-t-elle encore dans nos navigateurs ? Il existe des normes pour le glisser-déposer dans la nouvelle norme HTML5. dans le cadre du standard HTML5, n'importe quel élément peut être glissé et déposé.

1. Prise en charge du navigateur


Internet Explorer 9, Firefox, Opera 12, Chrome et Safari 5 prennent en charge le glisser-déposer.


Remarque : le glisser-déposer n'est pas pris en charge dans Safari 5.1.2.

2. Comment utiliser

Tout d'abord, afin de rendre l'élément déplaçable, définissez l'attribut draggable sur true : 

<img  draggable="true" / alt="Le chemin de Xiaoqiang vers le développement mobile HTML5 (16) – la fonction magique glisser-déposer" >

Ensuite, lorsque l'élément est déplacé. , Que se passe-t-il


Laissez l'attribut ondragstart appeler une fonction et renvoyer un objet glisser à la fonction 

<img id="drag1" src="img_logo.gif" draggable="true"  
ondragstart="drag(event)" width="336" height="69" />

paramètre de la méthode dataTransfer.setData() Data type et valeur des données déplacées : (Nous transmettrons l'identifiant de l'objet déplacé à dataTransfer) Où mettre 

function drag(ev)  
{  
<span style="white-space:pre">  </span>ev.dataTransfer.setData("Text",ev.target.id);  
}

- ondragover


L'événement ondragover spécifie où placer les données glissées.

Par défaut, les données/éléments ne peuvent pas être placés à l'intérieur d'autres éléments. Si nous devons autoriser le placement, nous devons empêcher la gestion par défaut de l'élément.

Cela se fait en appelant la méthode event.preventDefault() de l'événement ondragover : 

event.preventDefault()

Lorsque les données glissées sont placées, l'événement drop se produit.

Dans ce qui précède, l'attribut ondrop appelle une fonction, drop(event) : 

function drop(ev)  
{  
<span style="white-space:pre">  </span>ev.preventDefault();  
<span style="white-space:pre">  </span>var data=ev.dataTransfer.getData("Text");  
<span style="white-space:pre">  </span>ev.target.appendChild(document.getElementById(data));  
}

Explication du code :

  • Appel de PreventDefault() pour éviter le traitement des données par défaut du navigateur (le comportement par défaut de l'événement drop est de s'ouvrir sous forme de lien)

  • Récupérez les données glissées via la méthode dataTransfer.getData("Text") . Cette méthode renverra n'importe quel ensemble de données du même type dans la méthode setData().

  • Les données déplacées sont l'identifiant de l'élément déplacé ("drag1")

  • Ajouter l'élément déplacé à l'élément de placement (élément cible )中

2. Exemple 

<!DOCTYPE HTML>  
<html>  
    <head>  
        <script type="text/javascript">  
            //阻止对元素的默认处理方式  
            function allowDrop(ev)  
            {  
                ev.preventDefault();  
            }  
              
            //将被拖动对象的id传递给dataTransfer中间对象  
            function drag(ev)  
            {  
                ev.dataTransfer.setData("Text",ev.target.id);  
            }  
              
            //取得拖动对象id找到对象实例并用DOM模型添加到<div>里面  
            function drop(ev)  
            {  
                ev.preventDefault();  
                var data=ev.dataTransfer.getData("Text");  
                ev.target.appendChild(document.getElementById(data));  
            }  
        </script>  
    </head>  
    <body>  
        <!--要被拖动到的地方-->  
        <div id="div1" ondrop="drop(event)"    
        ondragover="allowDrop(event)"    
        style="border:1px solid red;width:300px;height:200px;">  
        </div>  
        <!--要被拖动的对象-->  
        <img id="drag1" src="test.png" draggable="true"  
        ondragstart="drag(event)"/>  
  
    </body>  
</html>

Le chemin de Xiaoqiang vers le développement mobile HTML5 (16) – la fonction magique glisser-déposer

Ce qui précède est la route de développement mobile HTML5 de Xiaoqiang (16) - magie Pour en savoir plus Pour plus d'informations sur la fonction glisser-déposer, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration：
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
Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (15) - Audio en HTML5Article suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (15) - Audio en HTML5

Articles Liés

Voir plus