Glisser-déposer HTML5
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é.
1. Glisser-déposer HTML5
Le glisser-déposer (Drag and drop) fait partie de la norme HTML5.
2. Drag start
ondragstart : Une fonction est appelée, drag (événement), qui spécifie les données glissées
3. Définir les données de glisser
setData() : Définir le type de données et la valeur des données glissées.
4. Placement
ondragover : L'événement spécifie où placer les données glissées.
5. Placement
ondrop : lors du placement des données glissées et déposées, un événement de dépôt se produira
Résumé :
ondrop Événements déclenchés sur la cible du glisser (élément source) :
ondragstart : déclenché lorsque l'utilisateur commence à faire glisser l'élément
ondrag : déclenché lorsque l'élément est déplacé
ondragend : déclenché une fois que l'utilisateur a terminé faire glisser l'élément
Événement déclenché lorsque la cible est relâchée
ondragenter : Cet événement est déclenché lorsque l'objet glissé par la souris entre dans la portée de son conteneur
ondragover : Lorsqu'un objet glissé se trouve dans un autre conteneur d'objets. l'événement est déclenché lors d'un glisser dans la plage
ondragleave : Cet événement est déclenché lorsque l'objet glissé par la souris quitte la portée de son conteneur
ondrop : Cet événement est déclenché lorsque le bouton de la souris est relâché lors d'un processus de glissement
Exemple de glisser-déposer :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>drop</title> <style> .box{ width: 400px; height: 400px; } #box1{ float: left; background-color: #CCCCCC; } #box2{ float: left; background-color: aqua; } </style> <script> var box1Div, msgDiv, img1, box2Dib; window.onload = function () { box1Div = document.getElementById("box1"); msgDiv = document.getElementById("msg"); img1 = document.getElementById("img1"); box2Div = document.getElementById("box2"); box1Div.ondragover = function (e) { e.preventDefault(); } box2Div.ondragover = function (e) { e.preventDefault(); } img1.ondragstart = function (e) { e.dataTransfer.setData("imgId","img1"); } box1Div.ondrop = dropImghandler; box2Div.ondrop = dropImghandler; function dropImghandler(e) { //创建节点 var img = document.getElementById(e.dataTransfer.getData("imgId")); e.target.appendChild(img); } } function showObj(obj) { var s = ""; for(var k in obj){ s+=k+":"+obj[k]+"<br/>"; } msgDiv.innerHTML = s; }</script> </head> <body> <div id="box1" class="box"></div> <div id="box2" class="box"></div> <img id="img1" src="http://img4.imgtn.bdimg.com/it/u=4240085321,3307603809&fm=21&gp=0.jpg" alt=""> <div id="msg"></div> </body> </html>