How to listen for drag and drop plain text in textarea with jQuery?

Question

I want a user to be able to drag and drop plain text (external to the browser) into a textarea, and listen for this event.

In chrome at least, .change() does not pick up on this, and jQueryUI .droppable() only seems to work with html elements, not plain text. Any suggestions are welcome.

Answer 1

This seems to work fine in IE7+, FF6, and Chrome (does not work on Safari):

$("textarea")
    .bind("dragover", false)
    .bind("dragenter", false)
    .bind("drop", function(e) {
        this.value = e.originalEvent.dataTransfer.getData("text") ||
            e.originalEvent.dataTransfer.getData("text/plain");

        $("span").append("dropped!");

    return false;
});

(Basically adapted from this related answer)

Example: http://jsfiddle.net/2cJZY/ Looks like you must cancel the dragover (and dragenter) event to catch the drop event in Chrome.