Maison > Article > interface Web > HTML5 glisser-déposer télécharger un exemple de fichier de partage de code

HTML5 glisser-déposer télécharger un exemple de fichier de partage de code

黄舟original: 2017-03-13 17:24:321498parcourir

Cet article présente un exemple simple de HTML5 glisser et télécharger des fichiers. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner en guise de modèle. 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é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é pendant que l'élément est glissé

ondragend - déclenché lorsque l'utilisateur termine de glisser l'élément

Événement déclenché lorsque la cible est relâchée :

ondragenter - lorsqu'il est déplacé par la souris Cet événement est déclenché lorsqu'un

objet en mouvement entre dans la portée de son conteneur

ondragover - Cet événement est déclenché lorsqu'un objet déplacé est glissé dans la portée de le conteneur d'un autre objet

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é pendant un processus de glissement

Code ci-dessus

<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 est une méthode pour faire glisser des images vers la gauche et la droite p. Il peut être utilisé comme une bière Harbin

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

FILES, il 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：Exemple de code pour une analyse détaillée du problème de lecture en plein écran de H5 WeChatArticle suivant：Exemple de code pour une analyse détaillée du problème de lecture en plein écran de H5 WeChat

Articles Liés

Voir plus