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

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

黄舟

Libérer： 2017-01-22 11:50:18

original

1231 Les gens l'ont consulté

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" >

Copier après la connexion

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" />

Copier après la connexion

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);  
}

Copier après la connexion

- 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()

Copier après la connexion

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));  
}

Copier après la connexion

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>

Copier après la connexion

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 (m.sbmmt.com) !