Comment implémenter le glissement d'éléments dans les compétences du didacticiel HTML5

Comment implémenter le glissement d'éléments dans les compétences du didacticiel HTML5_html5

WBOY

Libérer： 2016-05-16 15:51:44

original

1607 Les gens l'ont consulté

De nombreux frontaux ne comprennent probablement pas comment implémenter le glisser-déposer HTML5. Cet article vous donne quelques idées. Organisez et sauvegardez les fichiers pour pouvoir les consulter facilement plus tard.

Premier exemple :

index.html

Code XML/HTMLCopier le contenu dans le presse-papiers

>
<html>
<tête>
<meta charset="UTF- 8">
<titre>Faites glissertitre>
<style>
.box{
largeur : 400 px ;
hauteur : 400 px ;
flotteur : gauche ;
}
#box1{
arrière-plan : #CCC ;
}
#box2{
arrière-plan : #FF0 ;
}
style>
tête>
<corps>
<div id="box1" classe="boîte">div>
<div id="box2" classe="boîte">div>
<img src="http : //pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />

Code JavaScript复制内容到剪贴板

"app1.js">
app1.js
/**
* app1.js
*/
var oBox1,
oBox2,
oImg1;
window.onload = fonction(){
oBox1 = document.getElementById('box1');
oBox2 = document.getElementById('box2');
oImg1 = document.getElementById('img1');
//
oBox1.ondragover = oBox2.ondragover = fonction(e){
e.preventDefault();
} ;
//
oImg1.ondragstart = fonction(e){
e.dataTransfer.setData('text', e.target.id);
} ;
oBox1.ondrop = dropImg;
oBox2.ondrop = dropImg;
} ;
fonction dropImg(e){
e.preventDefault();
var tempImg = document.getElementById(e.dataTransfer.getData('text'));
e.target.appendChild(tempImg);
}

Implantant des points de connaissances

Les événements suivants seront déclenchés lors du processus de glisser-déposer :
Déclencher un événement sur la cible du glisser (élément source)
ondragstart - l'utilisateur démarre faire glisser l'élément Déclenché lorsque
ondrag - Déclenché lorsque l'élément est déplacé
ondragend - Déclenché une fois que l'utilisateur a fini de faire glisser l'élément

Événement déclenché lorsque la cible est relâchée
ondragover - 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 est glissé Cet événement est déclenché lorsque l'objet glissé est déplacé dans la plage du conteneur d'un autre objet
ondragleave - Cet événement est déclenché lorsque l'objet déplacé par la souris quitte la plage du conteneur
ondrop - Lors d'un processus de glissement, Cet événement est déclenché lorsque le bouton de la souris est relâché

objet événement (remplacé par e)

e.cible

L'explication sur W3Cschool est : Renvoie l'élément qui a déclenché cet événement (le nœud cible de l'événement) Cet attribut cible n'est compatible qu'avec ie9 et supérieur

e.preventDefault()

Annuler l'action par défaut de l'événement.

e.dataTransfer.setData()

Définissez le type de données et la valeur des données glissées :

Copiez le code

Le code est le suivant :

e. dataTransfer.setData("Text",ev.target.id); //Le premier paramètre est Text (les minuscules sont également acceptables)

e.dataTransfer.getData()

Récupérez les données glissées :

Copiez le code

Le code est le suivant :

e.dataTransfer .getData( "Texte");