Hidden text that can be dragged from the browser?

css, html, javascript, jquery

Solution

Instead of manipulating the browser's default behavior for dragging text/links/images, you want to set the data to something arbitrary in the `dragstart` event.

For example, use the text from a hidden `#content`:

$('[draggable]').on('dragstart', function(e) {
    var content = $(this).find('#content').text(); // Can be anything you want!
    e.originalEvent.dataTransfer.setData('text/plain', content);
    $(this).addClass('dragging');
});

Here is a working JSFiddle

Problem

How can you create an html element that when dragged from the browser into a text editor, hidden text on or in the dragged element will be pasted into the editor? My first thought was to use the href attribute on the anchor tag: ``` <a href="hidden message text here">Drag me into a text editor!</a> ``` This works great in chrome, but firefox and safari remove spaces from the href value which renders the copied message unusable. Any ideas?

Original source