从网站拖放文本到外部应用程序

Question

是否可以从网站拖动文本到外部应用程序？类似于用户如何从网站点击和拖动图像到Microsoft Word或Photoshop中，图像被放置到这些应用程序中。我想用文本做同样的事情。

在我的案例中，当用户单击可拖动的文本并将其放入Word或Notepad中时，我希望它放下存储在拖动事件中的数据。这只是纯文本。我可以处理外部应用程序中的放置事件，我只是不知道如何在拖动事件中存储文本。

目前，当我将HTML元素拖动到浏览器外部时，它总是显示“禁用”图标，这会阻止放置发生。

<div draggable=True class="shared" data-content="Apples">
Fruit A
</div>
<div draggable=True class="shared" data-content="Apples">
Fruit B
</div>

- JokerMartini

Answer 1

没问题！你需要使用事件的dataTransfer属性。尝试像这样：

for (const el of document.querySelectorAll('[draggable="true"]')) {
  el.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', e.currentTarget.dataset.content);
  });
}

JSFiddle: https://jsfiddle.net/vg129k4z/

- Brad