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

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

本文关键字：拖放 元素 文本 选择 HTML5      更新时间：2023-09-26

我想将文本选择从选项卡/窗口外部拖放到可放置元素。到目前为止，我能够将文件或元素从页面内拖放到拖放区/可放置元素。

我能够使用以下代码删除文件。我这里有完整的工作示例。

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 并加载嵌入代码等......

在 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">
相关文章：