Перетащите текст поверх DIV

Question

У меня есть div на моем веб-сайте, и при нажатии на него открывается окно поиска (выполнено с помощью jQuery).

Однако я бы хотел, чтобы этот div принимал перетаскиваемый текст. В моем случае пользователь выбирает обычный текст из любой точки сайта и перетаскивает его, чтобы скопировать и вставить в окно поиска.

Если окно поиска всегда было видно, он мог бы просто поместить его в текстовое поле, которое изначально обрабатывалось браузером / ОС. Тем не менее, есть ли способ, которым я мог бы симулировать то же самое с этим div? Пользователь будет перетаскивать свой текст в div и запускать событие click, чтобы отобразить текстовое поле и вставить пропущенный текст в поле.

Мой сайт использует Modernizr + jQuery + jQuery UI и HTML5 / CSS3. Совместимость с IE6 не является проблемой.

Заранее спасибо!

Answer 1

Вы можете использовать события перетаскивания HTML5:

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

Подробнее об этом можно прочитать здесь .