Glisser-déposer HTML5
Définition :
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é.
1. Parlez de "l'événement glisser-déposer"
Événement glisser-déposer, c'est-à-dire saisir un objet et le faire glisser vers une autre position
Certains événements sont déclenchés sur l'élément en cours de glisser-déposer, et d'autres sont déclenchés sur la cible de dépôt. Lorsqu'un élément est glissé, l'événement dragstart, l'événement drag et l'événement dragend sont déclenchés en séquence ; lorsqu'un élément est glissé vers une cible de dépôt valide, l'événement dragenter, l'événement dragover, dragleave ou drop est déclenché en séquence.
2. Processus de mise en œuvre
Définir les éléments comme déplaçables
<img draggable="true "> ;
Faites glisser quoi ? Lorsqu'un élément est glissé, des événements se produisent (ondragstart et setData())
l'attribut ondragstart appelle une fonction, drag(event) spécifie de voir les données glissées, dataTransfer.setData() définit le glisser-déposer Les données type et valeur des données.
fonction glisser(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
Où le mettre ? 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 vous souhaitez autoriser le placement, vous devez empêcher la gestion par défaut de l'élément. Par conséquent, ondrop doit être placé via la méthode event.preventDefault() dans l'événement ondragover
event.preventDefault()
Premier appel PreventDefault() Pour éviter le traitement des données par défaut par le navigateur, obtenez ensuite les données déplacées via la méthode dataTransfer.getData("Text"). Les données déplacées sont l'identifiant de l'élément déplacé. Enfin, l'élément déplacé est ajouté à l'élément placé.
fonction drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Vous venez de voir de nouveaux termes d'attribut, tels que ondragstart. Peut-être que ce n'est pas encore familier, et je ne sais pas pourquoi. Cela peut devenir soudainement clair pour vous si vous regardez le tableau ci-dessous :
Cycle de vie du glisser Attributs Valeur Description
Faites glisser le script ondragstart dans Exécuter le script lorsque l'opération de glisser démarre (l'objet est l'élément déplacé)
Pendant le processus de glisser ondrag script Le script est autorisé tant que le script est glissé (l'objet est l'élément glissé)
Pendant le processus de glisser ondragover script Lorsque l'élément est glissé vers une cible de placement légale, exécutez le script (l'objet est l'élément cible)
Pendant le processus de glisser ondragover script Tant que l'élément est glissé sur la cible de placement légal, exécuter le script (l'objet est l'élément cible)
Pendant le processus de glisser, ondragleave script Lorsque l'élément quitte la cible de placement légal (l'objet est l'élément cible). élément cible)
Le glisser termine le script ondrop sera glissé Exécuter le script lorsque l'élément glissé est placé dans l'élément cible (l'objet est l'élément cible)
Le glisser termine le script Ondragend Exécuter le script lorsque l'opération de glisser se termine (l'objet est l'élément déplacé)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
#divDrag{width:200px;height:20px;margin:10px;border:2px solid #111;}
#divArea{width:300px;margin:10px 0;height:300px;border:2px solid #ddd;}
#divTips{width:300px;background-color:#eee;}
</style>
<script type="text/javascript">
function getThisId(id){ return document.getElementById(id);}
var EventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){element.addEventListener(type,handler,false);}
else if(element.attachEvent){element.attachEvent("on"+type,handler);}else{element["on"+type]=handler;}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){element.removeEventListener(type,handler,false);}
else if(element.detachEvent){element.detachEvent("on"+type,handler);}else{element["on"+type]=null;}
},
getEvent:function(event){
return event? event:window.event; /*获取事件对象*/
},
getTarget:function(event){
return event.target||event.srcElement; /*获取目标元素*/
},
preventDefault:function(event){ /*取消事件的默认设置*/
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){ /*取消事件冒泡*/
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
window.onload = function(){
var Drag = getThisId("divDrag");
var Area = getThisId("divArea");
var objImg = document.createElement("img");
objImg.src = "l.jpg"
EventUtil.addHandler(Drag,"dragstart",function(e){
var objDtf = e.dataTransfer;
objDtf.setData("text",EventUtil.getTarget(e).id);
objDtf.setDragImage(objImg,0,0);
});
EventUtil.addHandler(Area,"dragover",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
});
EventUtil.addHandler(Area,"drop",function(e){
EventUtil.preventDefault(e);
EventUtil.stopPropagation(e);
var objDtf = e.dataTransfer;
var strHTML = objDtf.getData("text");
var replacediv=getThisId(strHTML).cloneNode(false);
EventUtil.getTarget(e).appendChild(replacediv);
});
}
document.ondragover = function(e){
e.preventDefault();
}
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body>
<div id="divFrame">
<div class="wPub" id="dddd">
<img id="divDrag" draggable="true" src="http://e.hiphotos.baidu.com/image/pic/item/f3d3572c11dfa9ec2eece15e61d0f703908fc1bd.jpg">
</div>
<div id="divArea"></div>
</div>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
