HTML5 放置目标支持哪些剪贴板格式？答案

【问题标题】：What clipboard formats are supported by HTML5 drop targets?HTML5 放置目标支持哪些剪贴板格式？
【发布时间】：2017-11-17 10:25:41
【问题描述】：

此剪贴板格式列表参考：

https://msdn.microsoft.com/en-us/library/windows/desktop/ff729168(v=vs.85).aspx

我在页面上创建了一个 HTML5 放置目标，并通过将各种应用程序中的数据拖入其中来玩游戏。

当我调试 Javascript 时，我可以在 event.dataTransfer 对象中找到每个数据。唯一的例外是从 SAP GUI 中的树控件拖动时，这正是我所追求的。在这种情况下，dataTransfer.item 列表为空，.type 列表也是如此。调用 dataTransfer.getData() 不会返回任何内容。

我已经在 IE、Chrome 和 Firefox 中尝试过，结果相同。

我在这方面的调查使我相信对 HTML5 的某些剪贴板格式的支持存在限制。支持哪些格式？

我想做的是获取剪贴板内容（如下图第一次更新所示）。

更新 2

下面是页面的代码。我在 drop() 函数中设置了断点，我可以从中分析事件对象。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style> #drop_target {width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style>
</head>
<body>
<div id="drop_target"></div>
</body>
<script>

var drop_target   = document.getElementById('drop_target');

function allowDrop(ev) {
    ev.preventDefault();
}
function drop(ev) {
  ev.preventDefault();
  console.log(ev.dataTransfer.types.length);
  console.log(ev.dataTransfer.getData("text"));
}

drop_target.addEventListener('dragover', allowDrop, false);
drop_target.addEventListener('dragenter', allowDrop, false);
drop_target.addEventListener('drop', drop, false);

</script>
</html>

更新 1

我从代码项目中找到了一个不错的实用程序，名为 ClipSpy，它允许我查看拖动事件的内容，它看起来像这样：

从我的浏览器中拖动一段文本时，将其与以下内容进行比较：

我想现在的问题更像是：如何在 Javascript 中访问原始拖动事件数据？

【问题讨论】：

标签： javascript windows html drag-and-drop

【解决方案1】：

在查看了有关“剪贴板 API 和事件”的 W3 规范之后，我发现了以下内容：

剪贴板数据

clipboardData 属性是 DataTransfer 接口，允许脚本读取和操作值在用户启动的复制、剪切和粘贴期间在系统剪贴板上操作。 相关的拖动数据存储是一个实时但过滤的视图 系统剪贴板，公开强制数据类型实现知道脚本可以安全地访问。对于合成事件，拖动数据存储包含由脚本添加的数据创建了事件。

它谈到这里的链接的“强制性数据类型”（在同一个文档中）：

https://www.w3.org/TR/clipboard-apis/#mandatory-data-types

有一个明显受支持的剪贴板格式列表（或旨在由规范的实现支持）。

在这种情况下，我必须得出结论，可能不支持自定义剪贴板格式。

【讨论】：