Glisser-déposer HTML5
Le glisser-déposer est une fonctionnalité courante où un objet est saisi puis glissé vers un autre emplacement.
En HTML5, le glisser-déposer fait partie du standard et n'importe quel élément peut être glissé-déposé.
Le glisser-déposer fait partie du standard HTML5.
Prise en charge du navigateur
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
ci-dessous L'exemple est une simple instance de glisser-déposer :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1 {width:300px;height:200px;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="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" width="300" height="200">
</body>
</html>Exécutez le programme et essayez de faire glisser l'image
Le programme peut paraître un peu compliqué, mais nous pouvons étudier 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, précisez ce qui se passe 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 "Text" et la valeur est l'identifiant du déplaçable. élément ( "glisser1").
Où mettre - ondragover
événement ondragover Précise où placer les données déplacé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()
pour le placement - ondrop
Lorsque les données glissées sont placées, le un événement de chute se produira.
Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event) :
function drop(ev)
{
ev. ();
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 (le comportement par défaut de l'événement drop est de l'ouvrir en tant que fichier lien)
Récupérez les données déplacé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 ) Comment faire glisser entre deux éléments <div> Mettez l'image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
#div1, #div2
{float:left; width:200px; height:205px; 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="http://img1.ph.126.net/MnyJ0KB2x0x5uxhOnXJtNA==/3337730273835664288.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="190" height="190"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>Exécutez le programme et essayez-le
