Drag & Drop

B

ByeBye 242513

Hallo Community,

ich versuche einen Dateiupload per Drag & Drop zu realisieren. Die Grundlegenden Informationen habe ich von diesem Tutorial: Link. Wenn ich bei meinem Code versuche eine Datei in den Dropbereich zu ziehen, erscheint keine Meldung (Alert-Box) sondern die Datei wird lokal geöffnet. In der Demo funktioniert der Code einwandfrei, was mache ich falsch?

Zur Demo: Link fiddle

Mein Code:
HTML: 
<!DOCTYPE html>
  <head>
    <title>Test</title>
    <style type="text/css">
      .dropzone {
        text-align: center;
        background: #EEE;
        border: 0.2em solid #000;
        padding: 3em;
      }
    </style>
  </head>
  <body>
 
    <div class="dropzone">Drop!</div>

  </body>
</html>

<script>
  $('.dropzone').on('dragover', function(evt){
    evt.preventDefault();
  });

  $('.dropzone').on('dragenter', function(evt){
    evt.preventDefault();
  });

  $('.dropzone').on('drop', function(evt){
    evt.preventDefault();
    window.alert('Drop!');
  });
</script>
 
Hi,

du musst jquery einbinden, da du auf Funktionalitäten des Frameworks zugreifst. Ausserdem solltest du den Script-Bereich innerhalb des HTML-Dokuments einbinden.

Code: 
<!DOCTYPE html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style type="text/css">
      .dropzone {
        text-align: center;
        background: #EEE;
        border: 0.2em solid #000;
        padding: 3em;
      }
    </style>
  </head>
  <body>

    <div class="dropzone">Drop!</div>

    <script>
      $('.dropzone').on('dragover', function(evt){
        evt.preventDefault();
      });

      $('.dropzone').on('dragenter', function(evt){
        evt.preventDefault();
      });

      $('.dropzone').on('drop', function(evt){
        evt.preventDefault();
        window.alert('Drop!');
      });
    </script>
  </body>
</html>

Ciao
Quaese
 
Dass der vorgestellte JS-Code die jQuery-Bibliothek voraussetzt, wird in dem Tutorial mit keiner Silbe erwähnt - soviel zur Vermittlung grundlegender Informationen :rolleyes:

Das kann dann vom ungeübten (jQuery-/jsfiddle-)User irrtümlicherweise in den anhänglichen Demos auch schon mal übersehen werden, wie scheinbar in diesem Fall geschehen ;)
 
Zuletzt bearbeitet:
Und ich probier mir einen Wolf.... Eigentlich sah das Tutorial ganz gut aus, aber wenn so Grundlegende Informationen fehlen....

Dann habe ich gleich noch eine Frage:
Gibt es die Drag & Drop Funktion auch ohne externe Bibliothek, sprich reines HTML5?

Mein Vorhaben:
Aktuell nutze ich ein Uploadbutton <input type="file" /> und per Submit-Button wird die Datei von PHP verarbeitet. Nun möchte ich zusätzlich ein Drag & Drop Feld anbieten. Die Datei soll beim ziehen allerdings nicht automatisch hochgeladen werden, sondern nach Betätigung des Submit-Buttons an meine PHP-Funktion übergeben und verarbeitet werden.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück