EPiServer is using Dojo as the client-side rendering framework for the edit mode. Dojo contains dozens of different modules that help you with the rendering of your page. One of those modules is the drag and drop functionality, which can be found in the package dojo/dnd. EPiServer uses the drag and drop functionality of Dojo in a number of different places in the CMS. For example, when you drag a block in a ContentArea property on the page. It’s easy to extend the interface of EPiServer with Dojo. I have come up with a solution for viewing statistics of a page and I will explain this in a series of blog posts. For the solution, I had to extend the interface of EPiServer. In this first blog, I will talk and explain the drag and drop functionality of Dojo which is part of my solution.

The source of this blog can be found on my GitHub account. A live demo can be found onJSFiddle, which will provide a nice playground . For this demo, I’m not using EPiServer, but just a HTML page with the Dojo Toolkit.

Load Dojo

The Dojo Toolkit is available on the CDN of Google, namely ajax.googleapis.com. At the moment of writing the latest version of Dojo is 1.10. Below in the code snippet, the body element which contains my Dojo configuration. The first script element contains the configuration for Dojo. The src attribute points to the CDN of Google for loading the Dojo scripts. The data-dojo-config contains the Dojo configuration. Here I tell the framework to parse the HTML when Dojo scripts are loaded, debug must be true and to load the scripts asynchronously. In the packages section, I configure my own package with a name and location of my scripts.

In the second script element, I’m using the require method for loading three modules. My own module, dojo/parser (needed because I set the parseOnload to true) and dojo/domready (this module will wait until the DOM is loaded).

The first element after the body will load my custom module. The data-dojo-type contains a reference to my custom module.