Web UI: Drag and Drop Interaction While Scrolling

By Shawn Medero on 2007-02-21T05:08:09Z

While reorganizing my feeds in Bloglines tonight I came across an area where the merging of desktop and web UI’s need some attention. If you are not familiar Bloglines it is a web application for the reading and management of syndication feeds.

For both Safari and Camino (and quite possibly other browsers) scrolling up and down in the window does not work when you attempt to drag and drop a folder while editing your feed organization in the left hand panel.

Below is a screenshot of Bloglines[^1] with the region highlighted in yellow where the problem occurs:

bloglines-overview.png

If we take a closer look we can see where my mouse pointer is attempting to drag the folder object higher in this one window pane but the region is not reacting to my actions.

bloglines-drag-n-drop.png

Typically when you drag an object further up in a scrollable view the region will scroll up to a higher point. This exact interaction in Javascript is not inherently broken, it works fine for instance on Walter Zorn’s demonstration of his drag and drop library. Picking up any number of objects on Walter’s site and dragging them up and down the page will causing the scrollbar to follow your movements.

It is not a show-stopping bug but there are many of these minor annoyances users will find as they expect desktop like functionality from web applications.

[^1]: Regular Bloglines users might notice a slight difference between my interface and yours. I am using Jon Hicks excellent OS X skin for Bloglines to spruce up things a bit. For the troubleshooting types I did disable the theme but the problem still happens. Jon’s theme is really just a set of special CSS styles that have no effect on the Javascript code.