Drag-drop text over DIV

Question

I have a div in my website, and when it's clicked upon, it reveals the search box (done with jQuery).

However, I would like this div to accept drag'n'dropped text. In my use case, a user selects regular text from anywhere on the site, and drag'n'drops it to copy-paste it into the search box.

If the search box was always visible, he could simply drop it into the text box, handled natively by the browser/OS. However, is there a way I could simulate the same thing with this div? The user would drop his text onto the div, and it would fire the click event to show the text box and paste the dropped text into the box.

My website is uses Modernizr+jQuery+jQuery UI and HTML5/CSS3. IE6 compatibility is a non-issue.

Thank you in advance!

Answer 1

You can use the HTML5 Drag and Drop events:

$('#dropTextHere').bind('drop', function (e) {
    var theDroppedText = e.originalEvent.dataTransfer.getData('Text');
});

You can read more about it here.