Glisser-déposer HTML5


Le glisser-déposer fait partie du standard HTML5.

b27335353b2ead8855b5fb5e8de63b4.png

Faites glisser l'icône du site Web chinois php dans la boîte rectangulaire.

Glisser-déposer

Le glisser-déposer est une fonctionnalité courante qui vous permet de saisir un objet et de le faire glisser vers un autre emplacement plus tard.

En HTML5, le glisser-déposer fait partie du standard et n'importe quel élément peut être glissé-déposé.

Prise en charge des navigateurs

e788739015d6484a44f564f64791f9e.png

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

Remarque : Safari 5.1.2 ne prend pas en charge le glisser-déposer.

Exemple de glisser-déposer HTML5

L'exemple suivant est un simple glisser-déposer Placer l'instance :

Instance

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<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>拖动 php中文网 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://img.php.cn/upload/course/000/000/010/58043146a1da1979.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Cela peut paraître un peu compliqué, mais nous pouvons étudier les différentes parties de l'événement glisser-déposer séparément.

Définissez l'élément comme déplaçable

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

<img draggable="true">

Que faire glisser - ondragstart et setData()

Ensuite, stipulez que lorsque l'élément est déplacé, ce qui se produit.

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 ("drag1").

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

Place - ondrop

Lorsque les données glissées sont placées, l'événement de dépôt se produit.

Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event) :

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

  • Appelez 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)

  • Par dataTransfer Méthode .getData ("Texte") pour obtenir les données glissées. 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 )

Plus d'exemples

Glisser et déposer des images d'avant en arrière
Comment glisser et déposer une image entre deux <div> éléments.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;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>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
	<img src="https://img.php.cn/upload/course/000/000/010/58049330dcf69494.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne