In my previous post I described how the number of clicks within edit mode can be reduced by adding keyboard shortcuts for common tasks like switching between tabs and saving pages. Another very common and click intensive task in EPiServer CMS is to set the value of PageReference properties. First the editor has to click the browse button on the edit control to bring up the Select Page dialog. Then the editor needs to navigate to the right page, select it and click the Select button. All these tasks involves clicking and is impossible (or at least hard) to do using only keyboard shortcuts. A better concept for setting page references would be to enable drag and drop from the edit tree to the right property control in edit panel.

When I started to look in to this I realized that enabling drag and drop from the standard page structure would be hard, because EPiServer CMS 6 uses drag and drop for reordering pages. I’m not saying it’s not doable, but it involves some tricky parts. So I started out creating a custom edit tree plug-in that lists some pages. In my example code, only the children of the start page are listed, but it’s quite easy to customize this plug-in if you need to.

First I tried to write all the JavaScript on my own, but it turned out to be really hard to support all the common browsers. I asked Ted Nyberg at Ted & Gustaf for some advice and he hinted me to look into the native drag and drop support in HTML5, which lead me to a great article by Zoltan Hawryluk on Cross browser HTML5 drag and drop. This article provides some helper classes to enable drag and drop which I use.

The implementation is quite easy. I have implemented a ControlAdapter where I add a CSS class to the InputPageReference property and register some JavaScript includes. The same JavaScript includes are added to the page tree plug-in (Pages.ascx). In InputPageReference.js I register events for dragstart, dragover, dragleave and drop on all textboxes and all InputPageReference controls. On the drop event I check if the data being dragged is of type pagereference and if the drop target is of type InputPageReference. If both are true, the control is updated with the correct values, otherwise I just fall back to the default browser behavior. The fallback is important to support drag and drop from the file manager.

All my example code is available in the Code section.

This post was first published on EPiServer World, available here.