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拖放 - 将选择文本拖放到可拖放元素

回答

相关问题