Maison >interface Web >Tutoriel H5 >5 fonctions API HTML5 puissantes qui valent la peine

5 fonctions API HTML5 puissantes qui valent la peine

高洛峰original: 2017-03-12 16:16:381332parcourir

Cet article présente un exemple simple de HTML5glissez téléchargement de fichiers. L'éditeur pense que c'est plutôt bien. Maintenant, je le partage avec vous et je le donne. à tout le monde. Soyez une référence. Suivons l'éditeur pour y jeter un œil.

J'ai implémenté pas mal de fonctions sur le PC HTML5. J'utilise également le téléchargement par glisser-déposer au travail. J'ai spécialement enregistré cette fonction.

<.> événement déclenché sur la cible de glissement (élément source) :

ondragstart - déclenché lorsque l'utilisateur commence à faire glisser l'élément

ondrag - L'élément est déclenché lors du glisser

ondrag

end - Déclenché une fois que l'utilisateur a terminé 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 glissé se trouve à l'intérieur la portée d'un autre objet Cet événement est déclenché lors d'un glisser dans la portée du conteneur

ondragleave - Cet événement est déclenché lorsque l'objet glissé par la souris quitte la portée de son conteneur

ondrop - Relâchez la souris pendant un processus de glissement Cet événement est déclenché lorsque le

code

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        .box{width:800px;height:600px;float:left;}
        #box1{background-color:#ccc;}
        #box2{background-color:#000;}
    </style>
</head>
<body>
    <p id="box1" class="box"></p>
    <p id="box2" class="box"></p>
    <img id="img1" src="1.jpg">
    <p id="msg"></p>
</body>
<script>
var box1p,box2p,msgp,img1; 
window.onload = function(){
    box1p = document.getElementById(&#39;box1&#39;);
    box2p = document.getElementById(&#39;box2&#39;);
    msgp = document.getElementById(&#39;msg&#39;);
    img1 = document.getElementById(&#39;img1&#39;);
    box1p.ondragover = function(e){e.preventDefault();}
    box2p.ondragover = function(e){e.preventDefault();}

    img1.ondragstart = function(e){e.dataTransfer.setData(&#39;imgId&#39;,&#39;img1&#39;);}
    box1p.ondrop = dropImghandler;
    box2p.ondrop = dropImghandler;
}
function dropImghandler(e){
    showObj(e);//获取拖放所有信息
    showObj(e.dataTransfer);//获取文件
    e.preventDefault();
    var img = document.getElementById(e.dataTransfer.getData(&#39;imgId&#39;));
    e.target.appendChild(img);
}
function showObj(obj){
    var s = &#39;&#39;;
    for(var k in obj){s += k+":"+obj[k]+"<br/>";}
    msgp.innerHTML = s;
}
</script>
</html>

Cette fonction permet de faire glisser l'

image vers la gauche et c'est vrai, je ne pense pas que la méthode soit utile. Elle peut être utilisée comme Harbin Beer

Ce qui suit est le code de téléchargement par glisser-déposer une fois que le back-end PHP a obtenu $_

FILE<.>S, ça peut être démarré

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée de la méthode d'implémentation de localStorage stockant les données JSON et lisant les données JSON en HTML5Article suivant：Explication détaillée de la méthode d'implémentation de localStorage stockant les données JSON et lisant les données JSON en HTML5

Articles Liés

Voir plus