Drag 'n drop not working

Question

Я пытаюсь создать простую функцию перетаскивания на моем веб-сайте, чтобы выбрать файл. Я выполнил this tutorial, чтобы реализовать его. Я скопировал и вставил код, и он не работает.

Я попробовал его на Chrome и Internet Explorer, и оба они имели одинаковые результаты, то есть они отображали новую страницу с изображением. Я хочу, чтобы он получил путь к файлу, как при загрузке с обычного input type="file".

Я тогда пробовал это на JSFiddle, и он работает в JSFiddle. Как я могу заставить его работать в моем браузере? Вот link to the files.

Фрагмент кода:

function handleFileSelect(evt) { 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 

 
    var files = evt.dataTransfer.files; // FileList object. 
 

 
    // files is a FileList of File objects. List some properties. 
 
    var output = []; 
 
    for (var i = 0, f; f = files[i]; i++) { 
 
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
 
     f.size, ' bytes, last modified: ', 
 
     f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
 
     '</li>'); 
 
    } 
 
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
 
} 
 

 
function handleDragOver(evt) { 
 
    evt.stopPropagation(); 
 
    evt.preventDefault(); 
 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
 
} 
 

 
// Setup the dnd listeners. 
 
var dropZone = document.getElementById('drop_zone'); 
 
dropZone.addEventListener('dragover', handleDragOver, false); 
 
dropZone.addEventListener('drop', handleFileSelect, false);

.example { 
 
    padding: 10px; 
 
    border: 1px solid #ccc; 
 
    width: 50%; 
 
    margin: auto; 
 
} 
 
#drop_zone { 
 
    border: 2px dashed #bbb; 
 
    border-radius: 5px; 
 
    padding: 25px; 
 
    text-align: center; 
 
    font: 20pt bold'Vollkorn'; 
 
    color: #bbb; 
 
    height: 100px; 
 
}

<div class="example"> 
 
    <div id="drop_zone">Drop files here</div> 
 
    <output id="list"></output> 
 
</div>

Answer 1

Проблема в том, что скрипт выполняется до DOM нагрузок. Простейшим решением было бы переместить тег <script>, ссылающийся на filedrag.js на нижнюю часть body.

Если вы хотите сохранить filedrag.js в головке вашего документа, вам нужно подождать, пока DOM будет полностью загружена, прежде чем пытаться ссылаться на такой элемент, как drop_zone. Поскольку вы решили использовать JQuery, вот как вы можете это сделать:

function handleFileSelect(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 

    var files = evt.dataTransfer.files; // FileList object. 

    // files is a FileList of File objects. List some properties. 
    var output = []; 
    for (var i = 0, f; f = files[i]; i++) { 
     output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
     f.size, ' bytes, last modified: ', 
     f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
      '</li>'); 
    } 
    $('#list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
} 

function handleDragOver(evt) { 
    evt.stopPropagation(); 
    evt.preventDefault(); 
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy. 
} 

// This is necessary or jQuery won't include the data property when an event is triggered 
// It's recommended you use the native event listeners, as this method will add extra overhead. 
$.event.props.push("dataTransfer"); 

// Setup the dnd listeners. 
window.onload = function(e) { 
    var dropZone = $('#drop_zone'); 
    dropZone.on('dragover', handleDragOver); 
    dropZone.on('drop', handleFileSelect); 
}