suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zum Implementieren von Datei-Drag-and-Drop mit JS

Detaillierte Erläuterung der Schritte zum Implementieren von Datei-Drag-and-Drop mit JS

php中世界最好的语言
php中世界最好的语言Original
2018-04-27 16:45:261884Durchsuche

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte zum Implementieren von Datei-Drag-and-Drop mit JS geben. Was sind die Vorsichtsmaßnahmen für die Implementierung von Datei-Drag-and-Drop mit JS? Schauen Sie mal rein.

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code von Javascript zur Implementierung des Datei-Drag-Ereignisses als Referenz mit. Der spezifische Inhalt ist wie folgt:

1 :

2. Quellcode

<%@ 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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte achten Sie darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Element Traversal-Implementierung

Detaillierte Erläuterung der Verwendung der API-Schnittstelle im Vue-Projekt

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Implementieren von Datei-Drag-and-Drop mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Schritte zur Verwendung globaler und lokaler Vue-KomponentenNächster Artikel：Detaillierte Erläuterung der Schritte zur Verwendung globaler und lokaler Vue-Komponenten

In Verbindung stehende Artikel

Mehr sehen