HTML5 拖放 - 将选择文本拖放到可放置元素

Question

我想将 tab/window 外部的文本选择拖放到可放置元素中。到目前为止，我能够将页面内的文件或元素拖放到 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]);
  }
});

我希望用户能够拖放链接、文本等。我想检测这些文本然后执行某些操作。例如，如果用户从 youtube 视频中拖放 url，我会将其检测为 youtube url 并加载嵌入代码等...

Answer 1

在你的 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">

HTML5 拖放 - 将选择文本拖放到可放置元素

HTML5 Drag & Drop - Get a selection text dropped to a droppable element

html

javascript

drag-and-drop

getselection