the dragging and droppings
For the past two weeks I’ve been working on the drag and drop module for thud. Even though I had read PPK’s: The HTML5 drag and drop disaster. I thought, “Wow! I can use the new HTML5 drag and drop events to build my drag and drop module!” WRONG!!!
I won’t go into everything he’s already talked about in his post, it’s brilliant, and if you haven’t read it you absolutely should. I would like to, however, extend the list of grievances:
- Setting a drag image — the html snippet or image you see following the cursor — is convoluted. What if I wanted to use the item I clicked on rather than a copy of it? There isn’t a method in place for that.
- Scrolling the document instead of exiting the browser window. Currently dragging allows you to drag outside of the browser window. What if i want to restrict the dragging to within the current document and scroll the document in the direction i am dragging when i hit the edge?
- Constraining the drag to specific coordinates in the document (e.g. { bottom : 400, left : 10, right : 400, top : 10 }).
- Limiting the drag to only horizontal or vertical directions.
- Snap to grid dragging (e.g. a 16px snap would only move the drag image in increments of 16px in any direction).
These options are all available in the drag and drop implementations of various frameworks I’ve worked used — MooTools, Ext, Scriptaculous, etc… — and are there for good reason, we need them to give the user a rich experience when building UI components!
My feeling is I will need 2 different types of drag and drop in thud. One will be for restricting UI components to a page (non-html5 implementation); the other will be for dragging objects from external sources to the document and vice versa (html5 implementation). WAH! :’(
