Drag-and-drop (dnd) in Optimizely Content Management System (CMS) uses the "dnd" system in Dojo with some additions. See the [Dojo Drag'n'Drop Redux](🔗) tutorial.
Note
To use the additional functionality in CMS your drag source or target class should implement the CMS shell classes instead of the Dojo base classes (epi/shell/dnd/Source or epi/shell/dnd/Target).
## Create sources and targets
The following example is a fully functioning component that both implements a drag source and a drag target.
## Data types
Because JavaScript is a loosely typed language, you should treat data types as a contract or interface. CMS uses a number of known types for drag and drop, which are described in the following table:
| Type name | Data format |
| "epi.cms.pagereference" <br>"epi.cms.blockreference" <br>"epi.cms.folderreference" <br>"epi.cms.contentreference" | A string representation of a content reference, such as _3\_122_. There are converters that convert specific types (such as page reference) to content references. This means that a drag target that accepts content references also accepts page references but not vice versa. |
| "fileurl" | A URL to any file, such as _/myvpp/myfolder/mydocument.pdf_. |
| "imageurl" | A URL to an image, such as _/myvpp/myfolder/myimage.jpg_. |
| "link" | An object with two properties:
- `url` – the URL to the resource
- `text` – the inner text for the link |
| "epi.cms.content.lighturi" (there also are specific versions like "epi.cms.page.lighturi") | An object with two properties:
- `name` – The name of the page
- `uri` – The string representation of the content uri. This might or might not include version information. For instance _epi.cms.contentdata:///8_. |
|  |  |
| "epi.cms.content.light" (there also are specific versions like "epi.cms.page.light") | An object with two properties:
- `name` – The name of the page
- `contentLink` – The string representation of the content reference without any version information, such as _123_. |
|  |  |
## Type converters
You might want to support drag and drop to or from something for which you do not control the source code. You also might want to convert the dragged data to another format. Because you might specify types as an array, both for the source and the target, specify all types that the source delivers and the target accepts.
For a target, you might have to convert the data on acceptance.
For the source, this works fine as long as you can create the object and still support several types.
Example:
A dnd source delivers image URLs. It may specify the type as `["imageurl", "fileurl"]` because these types expect the object to the a string with the URL to the actual content. This content can be dragged to targets that accept an `"imageurl"` or a `"fileurl"`. However, if you want to drag this content to a target that accepts a link, the source cannot create an object that can be both an `"imageurl"` or `"fileurl"` and a link at the same time, because the link expects a complex object with two properties: `url` and `text`.
To handle these kinds of scenarios, CMS added object _type converters_. These are simple classes that implement a convert method with `sourceDataType`, `targetDataType` and data as parameters. You can use a singleton converter registry to register a converter, in the `initialization` method of your `module` class, for combinations of conversions:
The following example shows how to convert between content dnd formats. In a standard installation, this is used to drag pages from the page tree to a page selector to select a page reference or a TinyMCE editor to create a link to the page.