While Dojo 1.0’s release improved the documentation available for the dojo toolkit, I still often find myself having to resort to reading the source code itself to get things working. In particular, dojo’s documentation for the programmatic use of some of its widgets and utilities seems to be lacking.
As part of the uPortal 3 theme update effort, I’ve been trying to get dojo 1.0.2’s drag and drop support working. We used a custom dojo-based drag and drop handler for moving portlets in uPortal 2.6, but I wanted to begin using the new, official drag and drop engine included in the dojo 1.0 distribution. Unfortunately, the documentation is mostly geared towards using dojo with parseOnLoad enabled.
Through some trial and error and source code reading, I discovered that the following steps are generally necessary to enable dojo’s drag and drop programmatically with parseOnLoad set to false:
- Set “dojoDndItem” as the CSS class name for each element that should be draggable.
- Use javascript to create a dojo.dnd.Source object for each parent container object. These items should be direct parents fo the draggable elements.
While this allowed all of the portlets to be draggable, I found that none of the form text fields or other interactive elements in the portlets worked. We need drag handles! As it turns out, specifying a parameter of “withHandles: true” in the Source object, and then giving an element a CSS class of “dojoDndHandle” allows only part of the draggable object to function as a drag handle.
The finished result looks like the following: