Wednesday, September 3rd, 2008

Drag and drop via sneaky Textarea hack

Category: Canvas, JavaScript

Ernest Delgado put together work from an earlier project, and the realization that textareas are native drop targets, to create Drag and Drop without Drag and Drop.

Something that I never realized before is that text areas are drop targets by default. Using this property alone (without registering drag events on the source elements), we can emulate drag and drop behavior of non-linked images between different documents.

Put together the layers, with canvas, and a hidden transparent text area, and you get the following architecture:

Then, check out the demo that allows you to drag between gadgets. Take images from the right hand magnet, and paste them onto the fridge!

Posted by Dion Almaer at 7:02 am
8 Comments

+++--
3.3 rating from 27 votes

8 Comments »

Comments feed TrackBack URI

Doesn’t seem to want to work with Chrome :P

Comment by XHR — September 3, 2008

Love the idea! Even if it doesn’t work in IE, it is still a clever way to use functionality that already exists in the browser in a new and inventive way.

Comment by zachleat — September 3, 2008

Huh. I something similar to allow drag-and-drop upload with a file select input – Unfortunately, it only really worked in Safari or Firefox with a special extension enabled.

Comment by fatlotus — September 3, 2008

Fails in Opera and Safari as well, Firefox only?

Comment by Jeria — September 3, 2008

Cool idea, ruined by a cruel and heartless world.

Comment by Nosredna — September 3, 2008

On Chrome, it only works when you drag the image to the very top of the fridge, then you can move the image. Interesting concept. is it any faster/easier to implement than the traditional way?

Comment by antimatter15 — September 3, 2008

We’ve been using a similar technique in our drag-and-drop editor on Grazr for a long time (over a year now, man startup time flies).

Our editor goes a step farther allowing the dragging and dropping of different kinds of resources (cross frame and cross browser window). IMHO it was one of the coolest pieces of tech we released, but we didn’t really get a lot of attention for it. We put in the engineering to have it function in IE, Safari, and FF (no idea about chrome).

I’ve been meaning to write up the technique, and why it’s such a powerful idea, something I’ve been referring to as a “semantic clipboard” of sorts but Grazr work has always gotten in the way. This post has inspired me to go back and document the technique, and how we took it well beyond this example/demo. I’ll try to write something up today or tomorrow with some details.

I shot a quick screencast showing dragging various data types cross window. Unfortunately it didn’t come out very clearly.

http://vimeo.com/1660790

The editor is live on Grazr.com, you just need an account to access it.

Comment by mikepk — September 3, 2008

I couldn’t help myself, I made another one and uploaded as HD. Definitely clearer.

http://vimeo.com/1661299

Comment by mikepk — September 3, 2008

Leave a comment

You must be logged in to post a comment.