Drag'n Drop

Exercise for the Adobe/Day engineering team – by Gabriel Walt

Known Supported Browsers:

• Chrome 15 (perfectly supported)
• Firefox 7 (perfectly supported)
• Desktop Safari 5 (perfectly supported)
• iPad Safari 5 [0]
• Internet Explorer 8 [1]

Known Not Supported Browsers:

• Firefox 3.6 [2]
• Opera 10 [3]
• Internet Explorer 7 [4]

Implemented an HTML5 drag & drop jQuery library from scratch that features:

• Uses the HTML5 events
• Uses Modernizr for feature detecting the support of HTML5 drag & drop events
• Vertically reorderable elements
• Multiple selections are possible by simply clicking on them
• Contrary to what was asked, I didn't make the multi-select with CTRL/CMD+click, because that would make it less useable and breaking support of touch devices
• Supports touch devices with the limitation that it doesn't allow dropping to another frame
• Selection and dragging over different frames as well as different areas within the same document supported
• Elements and classes used are fully configurable
• It creates one global variable, but this can be disabled if not needing the multi-frame feature
• Even if I've assigned an ID to every draggable element, they are not needed for the script to work

Using a customized HTML5 Boilerplate for a start:

• Using a custom verion of the HTML5 shiv, inlined in the HTML head element for optimization
• Insted of setting a no-js class when JS is not present, I'm adding a js class if it is present
• Added an optimized version of Modernizr that only contains the drag & drop detection functions
• Removing favicons and all the build and test scripts

Created a minimalistic node.js HTTP server for fun:

• I know, this is not part of the drag & drop exercise, but I wanted to try out node.js
• Added mustache templating library to try it out as well and to have a templating abstraction
• Basically, if a file doesn't exist, it will check if there is a JSON version to use with the template
• The JSON files contain a "template" property that tells what template to use to render it out
• 404 and 500 error codes supported that will redirect to the configurred files

Test Script:

Start the node.js server:

cd server
node server.js 127.0.0.1 8080

Then take your browser and go to url:

http://127.0.0.1:8080

This will display a test page with tree frames and some dummy content to drag around.

To test another use-case with several drag&drop areas on the same page (without frames), you can also checkout the following page:

http://127.0.0.1:8080/pages/multi.html

Notes:

[0] Because of iOS limitation, it only supports drag & drop within the same frame, not to another frame.

[1] It kind of works, but a very annoying bug makes that most of the time some text gets selected, rather than starting the drag & drop. There must be a way to fix that, but I didn't find it yet.

[2] Actually the script works, but Firefox 3.6 has an HTML5 parsing bug that splits inline elements that contain block-level elements (but HTML5-wise it is legal to have <a><h1>foo</h1><p>bar</p></a>). And IE requires the dragable elements to be links or images (when using the HTML5 drag&drop events). I wanted to use the HTML5 drag&drop (because I wanted to test them), wanted to use block-level elements inside the draggable element, and wanted to have a chance to support IE, so as far as I know, this inevitabely breaks FF 3.6 support.

[3] Opera doesn't support the HTML5 drag&drop events, feature detection simply nicely prevents the script from being executed. With the mess the HTML5 drag&drop events are, I can't blame them.

[4] IE7 (as well as IE6 as far as I have read online) support the HTML5 drag&drop events, so theoretically there should be a way to support them. But as long as I couldn't fix 100% of the IE8 bugs I didn't even dive into testing IE7.