Maison > Article > interface Web > Comment implémenter la fonction glisser-déposer dans H5

Comment implémenter la fonction glisser-déposer dans H5

php中世界最好的语言original: 2018-01-10 09:27:222326parcourir

En HTML5, le glisser-déposer fait partie du standard, et n'importe quel élément peut être glissé-déposé. Voici un cas avec fonction glisser-déposer réalisé avec H5. Jetons un coup d'oeil.

<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}   
</style>  
<script>  
function allowDrop(ev)   
{   
ev.preventDefault();   
}   
function drag(ev)   
{   
ev.dataTransfer.setData("Text",ev.target.id);   
}   
function drop(ev)   
{   
ev.preventDefault();   
var data=ev.dataTransfer.getData("Text");   
ev.target.appendChild(document.getElementById(data));   
}   
</script>  
</head>  
<body>  
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>  
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>  
<br>  
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">  
</body>  
</html>

2. Définissez l'élément pour qu'il soit déplaçable

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

3. Que faire glisser - ondragstart et setData()

Ensuite, spécifiez ce qui se passera lorsque l'élément est déplacé. Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(event), qui spécifie les données à glisser. La méthode dataTransfer.setData() définit le type de données et la valeur des données déplacées :

function drag(ev)   
{   
   ev.dataTransfer.setData("Text",ev.target.id);   
}

Dans cet exemple, le type de données est "Texte" et la valeur est l'identifiant de l'élément déplaçable (" glisser1") .

4. Où placer - 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 dans 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()

5. Place - ondrop

Lorsque les données glissées sont placées, un événement de dépôt sera se produire. Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event) :

function drop(ev)   
{   
ev.preventDefault();   
var data=ev.dataTransfer.getData("Text");   
ev.target.appendChild(document.getElementById(data));   
}

Explication du code :

Appelez PreventDefault() pour éviter le traitement des données par défaut du navigateur (la valeur par défaut le comportement de l'événement drop est de s'ouvrir sous forme de lien). Obtenez 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"). Ajoutez l'élément glissé à l'élément déposé (élément cible).

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment créer un effet de glissement dans H5

Introduction détaillée à l'interface générale de H5

Comment utiliser postMessage pour transférer des données entre deux pages Web en H5

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!

php html5 数据类型接口 Event 事件

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：Résumé des balises au niveau du bloc H5Article suivant：Résumé des balises au niveau du bloc H5

Articles Liés

Voir plus