Here at Zenbe we like to do something that I call “Taking Javascript Seriously”, and it’s one of the core principles that stands behind Shareflow, Zenbe Mail, and Zenbe Lists, making them as slick and speedy as they are. It means that we rely on a rich layer of Javascript to process and render your emails, flows, and to-do lists. Most of the work that happens in Zenbe applications happens right inside your browser, with the underlying data getting synced back up to the cloud when it’s convenient.

So we’re always excited about the possibilities that arise when new Javascript features become available, and the upcoming implementations of HTML5 promise to bring along a real wealth of new scriptable goodies. Looking to the past, as well as to the future, the HTML5 team has decided to standardize a number of old, browser-specific features — this means that some of the ostensibly new features in HTML5 have already been around for years, and that some are even ready to use right now.

Today, we’re introducing web drag and drop for Shareflow, so that you can quickly and easily share images, text, links, and web clips, just by dragging them into a flow. Say you’re surfing the New York Times, and you see a paragraph from the front page that you’d like to share. Select the paragraph, drag it into Shareflow, and you can share it instantly with the rest of your team. Drag and drop works with word processing applications as well, you can drag in the text of a progress report or business outline. If you have a link to a document or image on the web, dragging the link into Shareflow will upload that document to the Flow, just as if you had used the file uploader to post it directly. Try browsing around your favorite photography website and dropping the pictures right into a flow.

Despite being so new, drag and drop has pretty good browser support. We’ve tested it and confirmed that it works in the following browsers:

• Firefox 3.5
• Safari 4
• Internet Explorer 7
• Google Chrome

The new drag and drop specification is a great step forward, but there are still plenty of differences and quirks lurking among the browsers. To help alleviate the incompatibilities, we’re open-sourcing a little bit of Javascript from our internal framework, a class called the zen.util.DropManager. If you’re a web developer, and you’d like to use HTML5 drag and drop in your projects, give the DropManager a try.

When you attach it to an HTML element, the DropManager takes care of enabling it as a drop target, handling some differences between the types of data that the browsers provide, and giving you back a clean object with the three potential parts you care about: URLs, HTML fragments, and plain text. You can grab the code right here:

http://gist.github.com/153019
(The DropManager depends on the Prototype Javascript framework).

If you find the DropManager useful, please feel free to fork it on GitHub and improve it.

If you want to see it in action, sign up for a free Shareflow account. Cheers!

This entry was posted on Thursday, July 23rd, 2009 at 11:17 am and is filed under Announcement. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.