Hidden text that can be dragged from the browser?

Question

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?

Answer 1

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

Answer 2

For versions of IE below 10 which don't support the dataTransfer method, I've discovered another somewhat hacky way to make this work.

Basically you make text invisible with css then use js to select it in the background on hover.

HTML

<div id="drag_area" draggable="true">
    <div id="text">
      hidden text
    </div>
</div>​

CSS

#text { filter:alpha(opacity=0); opacity:0;
        overflow:hidden; z-index:100000; width:180px; height:50px }

​ JS

    function selectText(elementID) {
        var text = document.getElementById(elementID);
        if ($.browser.msie) {
            var range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();        
        } else if ($.browser.mozilla || $.browser.opera) {
            var selection = window.getSelection();
            var range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        } else {
            var selection = window.getSelection();
            selection.setBaseAndExtent(text, 0, text, 1);
        }
    }
    $('#drag_area').hover(function(){
        selectText('text');  
    });

Here it is combined with Anson's solution and a little feature detection: http://jsfiddle.net/zaqx/PB6XL/ (works in IE8, IE9 and all modern browsers)

EDIT: Updated Fiddle in the comments below.