BlogsplatI’m working on spicing up the interface to one of our apps, so I thought I’d add some drag and drop to make things easier for users.
Here’s the workflow, the user is typing away at an article, and decides he wants to embed an image. So he selects the image from the file chooser control in the form, and the image is immediately uploaded (thanks YUI io!), and the thumbnail appears in a list on the right.
He then can either double click the image, or drag it into the text area to embed the appropriate code for that image where he dropped it.
Sounds easy right? Well, actually, as a web programmer, it probably doesn’t sound easy. Just deciding where to embed the code in a textarea based on a drop sounds like work (how do you get the pixel position of a character in a word-wrapped container?)
Then I read about HTML5 drag and drop. Safari supports it, Firefox 3.5 supports it, opera, chrome, and yes, even IE 5. It sounds too good to be true (and it is). What made this oasis particularly attractive was that I read that the standard was based on the IE functionality that was introduced in version 5. It seemed that if that were the case, this would work pretty well cross browser, especially for something as trivial as what I was doing.
But, I was wrong.
From my painful experience, you can’t make anything but img and a elements draggable, and even then, textarea’s aren’t valid drop targets for them.
Oh well, I guess IE users don’t get drag and drop.
I still have to make it easy for them to insert the image codes into the text area, which apparently isn’t as easy as firefox/safari, which have selectionStart and selectionEnd properties on textareas.