Maison  >  Article  >  interface Web  >  Javascript implémente l'événement glisser-déposer de fichiers

Javascript implémente l'événement glisser-déposer de fichiers

亚连
亚连original
2018-05-28 13:43:371566parcourir

Cet article présente principalement en détail l'implémentation des événements glisser-déposer en javascript. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. Le code spécifique de l'événement glisser est pour votre référence. suit

1. Rendu :

2 Code source

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère. cela sera utile à tout le monde à l’avenir.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <style type="text/css">
    #p1 {
      width: 350px;
      height: 70px;
      padding: 10px;
      border: 1px solid #aaaaaa;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drop(ev) {
      ev.preventDefault();
      console.log(ev.dataTransfer.files);
    }
  </script>
</head>
<body>

<p id="p1" ondrop="drop(event)" ondragover="allowDrop(event)">将文件拖放到此处</p>

</body>
</html>

Articles connexes :

Méthode de l'environnement de développement Vue-cli pour implémenter des requêtes inter-domaines

Explication détaillée du webpack Vue-cli mobile Problème de construction automatisée du terminal

Nodejs natif utilise le partage de code Websocket

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