HTML5拖放 - 將選擇文本拖放到可拖放元素

我想拖動&將選項卡/窗口外部的文本選擇拖放到可拖放元素。到目前爲止，我們可以將頁面內的文件或元素拖放到dropzone/droppable元素。HTML5拖放 - 將選擇文本拖放到可拖放元素

我能夠通過下面的代碼獲取文件的下拉列表。我有充分的工作示例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]); 
    } 
});

我希望用戶具有拖放鏈接的功能，文本等。我想檢測這些文本，然後做一些動作。例如，如果用戶從YouTube視頻中拖放網址，我會將其檢測爲YouTube網址並加載嵌入代碼等。

來源

2016-01-19 esafwan

在您的eventListener內部，您可以獲取正在拖動的內容的URL

e.dataTransfer.getData('URL');

通過URL，您可以檢索內容並顯示您想要的任何內容。爲了顯示YouTube視頻縮略圖，例如，解析用上面的代碼獲得的URL以獲取YouTube視頻ID並使用類似這樣的內容

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

來源

2016-01-19 15:58:41 Craveiro

HTML5拖放 - 將選擇文本拖放到可拖放元素

回答

相關問題