5 fonctions API HTML5 puissantes qui valent la peine-Tutoriel H5-php.cn

5 fonctions API HTML5 puissantes qui valent la peine

高洛峰

Libérer： 2017-03-12 16:16:38

original

1337 Les gens l'ont consulté

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>

Copier après la connexion

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!