Drag and drop text from website to external application

Question

Is it possible to drag text from a website to an external application? Similar to how users can click and drag and image from a website into microsoft word or even photoshop and the image is placed into those application. I would like to do this same thing with text.

In my case when a user clicks on the draggable text and drops it into word or notepade, i would like for it to drop the data stored in the drag event. Which is just plain text. I can handle the drop events in the external application, i just don't know how to store text in the drag event.

Currently when i drag the html element outside the browser, it always displays the 'disabled' icon which prevents the drop from happening.

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

Answer 1

Yeah, this is possible! You need to use the dataTransfer property of the event. Try something like this:

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/