HTML JS JQ Как перетащить содержимое из 2 текстовых файлов - PullRequest
Новая
       6

HTML JS JQ Как перетащить содержимое из 2 текстовых файлов

0 голосов
/ 20 сентября 2018

Проблема: у меня есть 2 текстовых файла с различным содержанием, f.E. textfile1 содержит "lorem", textfile2 содержит "ipsum".Бут сохранен в той же папке.КАК я могу отобразить 2 файла на экране и перетащить определенный файл на экране (в div или что-то еще), другой выше или ниже первого файла?

я нашел https://www.html5rocks.com/de/tutorials/dnd/basics/ и основнойиз selfhtml и других учебных пособий, но не удается указать папку.

здесь код, такой же, как учебное пособие: 

<div id="dropzone"> Ziehen Sie Ihre Dateien mit Drag & Drop hier herein:
        <br> (Durch Drücken der [strg]-Taste können Sie mehrfach auswählen!) </div>
    <output
    id="list"></output>
</main>
<script>
    function dateiauswahl(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        var gewaehlteDateien = evt.dataTransfer.files; // FileList Objekt
        var output = [];
        for (var i = 0, f; f = gewaehlteDateien[i]; i++) {
            output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a',
                ') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString(),
                '</li>');
        }
        document.getElementById('list')
            .innerHTML = '<ul>' + output.join('') + '</ul>';
    }

    function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            evt.dataTransfer.dropEffect = 'copy';
        }
        // Initialisiere Drag&Drop EventListener
    var dropZone = document.getElementById('dropzone');
    dropZone.addEventListener('dragover', handleDragOver, false);
    dropZone.addEventListener('drop', dateiauswahl, false);

</script>

Кто-нибудь получил представление о других учебных пособиях?

1 Ответ

0 голосов
/ 20 сентября 2018

Вот как я это делаю.(Код позволяет вам перетаскивать столько TXT-файлов, сколько вам нужно)

Я надеюсь, что правильно понял ваш вопрос. 

var dropzone = document.querySelector('#dropzone');
dropzone.addEventListener("dragenter", onDragEnter, false);
dropzone.addEventListener('dragover', onDragOver, false);
dropzone.addEventListener('drop',onDrop, false);


function onDragEnter(e) {
  e.stopPropagation();
  e.preventDefault();
}
function onDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy'; // it's a copy!
}
function onDrop(evt) {
  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files;// object FileList
  for (var i = 0; i < files.length; i++) {
   if(files[i].type == "text/plain"){
    var reader = new FileReader();
    reader.onload = function(event) {
      dropzone.value += event.target.result; 
      //console.log(event.target)
    }
    //instanceOfFileReader.readAsText(blob[, encoding]);
    reader.readAsText(files[i], "UTF-8");
  }else{console.log(files[i].type);}
  }  
}
#dropzone {
  display: block;
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 auto;
  padding: 1em;
  border: 1px dashed;
}
p{text-align:center; margin:2.5em;}
<p>Drop one or more .txt files on the textarea:</p>
<textarea id="dropzone"> </textarea>

Пожалуйста, прочитайте: Использование файлов из веб-приложений .

...