Case Study: Drag and Drop interactions in CourseBuilder
COURSEBUILDER DRAG AND DROP INTERACTIONS ARE NOW NETSCAPE 6 & 7 COMPATIBLE!
CourseBuilder contains the functionality to do a large number of interaction types within the restrictions of DHTML and JavaScript. Many of these interactions would formerly have required very advanced programming knowledge, and probably Java, in order to get them to work in a multi-browser environment. By providing object libraries within CourseBuilder, Macromedia have made the development of native DHTML interactions much simpler - fairly advanced interactions can be developed using a dialog-driven wizard interface.
One of the interaction types that we found to be extremely flexible is the drag and drop interaction.
Background
Programming a drag and drop interaction involves a number of elements:
- watch for a mouse down event to determine which object is being selected for movement
- maintain a trace on mouse movements and the resultant mouse position until a mouse up event, updating the display as the mouse is moved
- handle the mouse up event, checking if the item has been dropped in a valid destination
- reposition the dragged object accordingly, if necessary
- evaluate the positions of all of the draggable objects on screen, to determine which are correct and which are incorrect
- provide feedback for the user
All of the above are possible in the latest versions of both browsers, but (as with most advanced features) the implementation mechanisms in the various browsers are fairly different. Almost every one of the above steps would require triple coding - for IE, NS4.x and NS6+.
| View original basic Drag & Drop example (IE & NS 4.7 only) | View Source Code |
The
CourseBuilder method
CourseBuilder provides generic cross-browser* functions for all of the above requirements. It also provides easy access to these functions via the CourseBuilder wizard. A basic cross-browser drag-and-drop interaction can be created by simply selecting options from the standard CourseBuilder library. CourseBuilder's methodology is almost completely object-based - only the link between the on-screen draggable layers and the function calls which define the objects is slightly contrived.
CourseBuilder automatically handles all of the coding involved in ensuring the 6 elements of the drag-and-drop interaction work across different browsers. It therefore shields a huge amount of interaction and evaluation coding from the developer, while still allowing access to most of the attributes via the CourseBuilder dialogs and the Action Manager.
NEW! View updated Netscape-6 & 7 compatible CourseBuilder Drag & Drop
For one-to-one drag-and-drop interactions, you can avoid the overhead of
specifying the pairings by leaving a single pairing correct each time and
simply repositioning the drag and drop layers within the Dreamweaver WYSIWYG. As with all native browser code, CourseBuilder interactions victims of browser
upgrades. Whereas compiled Java or Flash code is not native, it does have
the advantage of being self-contained and therefore not strictly dependent
on the browser version. Browser Upgrades CourseBuilder itself currently caters for browsers up to NS version 4.7 and
IE up to version 6. The example above for Netscape 6 & 7 was the result
of addition coding, added to the object-based runtime libraries by none other
than yours truly. It was required due to the fact that Netscape, from version
6 onwards, uses different DOM and event scripting to both IE and the earlier
Netscape versions. See what the early adopters have to say...
Tip
Possible
problem areas
"This updated version of the Coursebuilder drag and drop is an enormous help to me. I have had clients get excited about using drag and drops, and then I have to give the bad news that Netscape 6/7 users can't work them. So I'm very happy about [Liam's] adjustments to the scripts." - Mary Howe, U.S.
"That did the trick. Thanks very much." - Michelle McIntyre, Australia
"Liam's revision of the Macromedia Coursebuilder™ support files has saved me a lot of hassle and work. His continued support to resolve an issue arising from a NN 7.1 quirk was unexpected and fantastic." - Gordon Svoboda, Nexstage Training Solutions, llc
"EXCELLENT! That did the trick!.....Works like a charm. Thanks so much for taking the time to look at this. I really appreciate it." - David Graver, Fairfax, Virginia, U.S.
If you have developed interactions using CourseBuilder, you can upgrade those interactions using these libraries. I am currently looking at releasing the libraries for a nominal fee. If you are interested, contact me at this email address
N.B. Please remove the spaces which appear in the email address in the link. Sorry for the inconvenience, but these are unfortunately necessary to avoid those annoying SPAM people and email harvesters.