ProcessWire Upload Formular mit Drag and Drop: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „Dies ist die Fortsetzung von ProcessWire Upload Formular mit AJAX und damit der dritte Teil der Upload Formular-Serie. Diesesmal möchten wir das Upload F…“) |
|||
| Zeile 2: | Zeile 2: | ||
Diesesmal möchten wir das Upload Formular um eine Drag and Drop Area erweitern. | Diesesmal möchten wir das Upload Formular um eine Drag and Drop Area erweitern. | ||
| + | |||
| + | == Drag and Drop Events == | ||
| + | Es gibt acht Events die der Browser abfeuert: | ||
| + | drag, dragend, dragenter, dragexit, dragleave, dragover, dragstart, drop | ||
| + | Wobei | ||
| + | drag, dragend, dragexit und dragstart | ||
| + | Nur für Seitenelemente wichtig sind die gezogen werden. Wir ziehen Elemente aus dem Dateisystem, daher brauchen wir diese nicht. | ||
| + | |||
| + | == Drop Area == | ||
| + | |||
| + | <div id="drop-area"> | ||
| + | <label for="images" id="images-label">Bilder</label><br/> | ||
| + | <input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/> | ||
| + | </div> | ||
| + | |||
| + | == Handler == | ||
| + | // DROP area | ||
| + | dropArea = document.getElementById('drop-area'); | ||
| + | dropArea.addEventListener('dragenter', handlerFunction, false); | ||
| + | dropArea.addEventListener('dragleave', handlerFunction, false); | ||
| + | dropArea.addEventListener('dragover', handlerFunction, false); | ||
| + | dropArea.addEventListener('drop', handlerFunction, false); | ||
| + | |||
| + | Interessant hier. Wenn man über ein '''Kindelement der #drop-area''' zieht wird für die drop-area dragleave gefeuert und für das Kindelement dragenter. Wen man jetzt den Mausbutton losläßt wird trotzdem das dropevent für die drop-area gefeuert, weil sich der drag Event nach oben durchpropagiert. | ||
| + | |||
| + | Damit der Browser nachher auch die Datei hochlädt und nicht im öffnet, muss man auch noch mit event.preventDefault() in jedem Listener das Standardverhalten unterbinden. | ||
Version vom 15. Februar 2019, 12:53 Uhr
Dies ist die Fortsetzung von ProcessWire Upload Formular mit AJAX und damit der dritte Teil der Upload Formular-Serie.
Diesesmal möchten wir das Upload Formular um eine Drag and Drop Area erweitern.
Drag and Drop Events
Es gibt acht Events die der Browser abfeuert:
drag, dragend, dragenter, dragexit, dragleave, dragover, dragstart, drop
Wobei
drag, dragend, dragexit und dragstart
Nur für Seitenelemente wichtig sind die gezogen werden. Wir ziehen Elemente aus dem Dateisystem, daher brauchen wir diese nicht.
Drop Area
<label for="images" id="images-label">Bilder</label>
<input type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
Handler
// DROP area dropArea = document.getElementById('drop-area'); dropArea.addEventListener('dragenter', handlerFunction, false); dropArea.addEventListener('dragleave', handlerFunction, false); dropArea.addEventListener('dragover', handlerFunction, false); dropArea.addEventListener('drop', handlerFunction, false);
Interessant hier. Wenn man über ein Kindelement der #drop-area zieht wird für die drop-area dragleave gefeuert und für das Kindelement dragenter. Wen man jetzt den Mausbutton losläßt wird trotzdem das dropevent für die drop-area gefeuert, weil sich der drag Event nach oben durchpropagiert.
Damit der Browser nachher auch die Datei hochlädt und nicht im öffnet, muss man auch noch mit event.preventDefault() in jedem Listener das Standardverhalten unterbinden.
