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>
section suivante