HTML5 Drag & Drop - Получить текст выделения, отбрасываемый на элемент сбрасываемым

Question

Я хочу перетащить & Отбросить выбор текста извне вкладки/окна в элемент с возможностью удаления. До сих пор я могу удалить либо файл, либо элемент изнутри страницы в элемент dropzone/droppable.

Я могу получить падение для файла с помощью приведенного ниже кода. У меня есть полный рабочего пример here.

var dropZoneTwo = document.querySelector('#dd-files'); 

dropZoneTwo.addEventListener('drop', function(e) { 
    if (e.preventDefault) e.preventDefault(); 
    if (e.stopPropagation) e.stopPropagation(); 

    this.className = ""; 

    var fileList = e.dataTransfer.files; 

    console.log(e); 

    if (fileList.length > 0) { 
    readTextFile(fileList[0]); 
    } 
}); 

Я хочу, чтобы пользователь имеет возможность перетаскивать ссылки, тексты и т.д. Я хочу, чтобы обнаружить этот текст и сделать определенные действия. Например, если пользователь перетаскивает URL-адрес из видео с YouTube, я буду определять его как URL-адрес youtube и загружать код для встраивания и т. Д.

Answer 1

Внутри вашего eventListener для капли вы можете получить URL-адрес того, что перетаскивается с помощью

e.dataTransfer.getData('URL'); 

Имея URL-адрес, вы можете получать контент и отображать все, что хотите. Чтобы показать миниатюру видеоролика youtube, например, проанализируйте URL-адрес, полученный с помощью приведенного выше кода, чтобы получить идентификатор видео YouTube и используйте что-то вроде этого

<img src="http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg">