javascript - Drag-drop text over DIV- Stack Overflow

admin管理员组

文章数量:1291327

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 patibility is a non-issue.

Thank you in advance!

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 patibility is a non-issue.

Thank you in advance!

• javascript
• jquery
• drag-and-drop

Share Improve this question Follow edited Sep 24, 2011 at 17:38 Saket 46.2k1313 gold badges6363 silver badges8080 bronze badges asked Sep 24, 2011 at 17:09 Emphram StavangerEmphram Stavanger 4,21499 gold badges3838 silver badges6666 bronze badges 3

• This question covers a similar topic. – Rusty Fausak Commented Sep 24, 2011 at 17:16
• I saw that topic, but it requires the dragged text to be in a specific container which is then made draggable(), whereas I'm talking about any old regular text you highlight and drag. I already tried applying droppable() to the div, and the drop event doesn't seem to fire. – Emphram Stavanger Commented Sep 24, 2011 at 17:21
• Perhaps using a bination of mouseover, mouseup and document.getSelection would work. See stackoverflow./questions/1317727/… – Rusty Fausak Commented Sep 24, 2011 at 17:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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.

本文标签： javascriptDragdrop text over DIV Stack Overflow