Question

我想拖拽＆amp;将选项卡/窗口外部的文本选择拖放到可放置元素。到目前为止，我能够从页面中删除文件或元素到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视频中拖放网址，我会将其检测为youtube网址并加载嵌入代码等...

Answer 1

在您的eventListener中，您可以获取正在拖动的内容的网址

<div ng-controller="FileInfo">
    <div>
        <div>
            {{fileInfo}}
        </div>
    </div>
    <div>
        {{fileInfo}}
    </div>
</div>

拥有网址，您可以检索内容并显示您想要的任何内容。例如，要显示youtube视频缩略图，请解析使用上述代码获取的网址以获取youtube视频ID并使用此类内容

e.dataTransfer.getData('URL');

HTML5 Drag＆amp;删除 - 将选择文本删除到可放置元素

1 个答案: