Drag text over div

Question

I have a div on my website, and when it is clicked, it opens a search box (executed using jQuery).

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

If the search box was always visible, he could just put it in a text box processed initially by the browser / OS. However, is there a way to simulate the same with this div? The user will throw his text into the div, and he will fire the click event to display the text field, and paste the pending text into the field.

My site uses the interface Modernizr + jQuery + jQuery and HTML5 / CSS3. Compatibility with IE6 is not a problem.

Thank you in advance!

Answer 1

You can use HTML5 drag and drop events:

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

You can find out more about this.