Implementing Drag and Drop

Content Studio accepts dropped content in the following locations:

The editor area (at the top alongside the tabs of any open editors)
Content item relation drop zones
Content item rich text fields
Section pages
Lists
Inboxes
The clipboard

You can make use of this functionality in your side panel components, allowing users to drag content into the main Content Studio user interface for editing, processing or display. The dragged content can be:

The web service URI(s) of existing content items retrieved from the Content Engine by your component
The web service URI(s) of new content items created by your component
The URI(s) of external content

Content item URIs are handled in the usual way: dropping one in the editor area, for example, will cause it to be opened in an editor. Any other URI will be treated as a binary object: a binary content item is created to hold a reference to the dropped object.

The content items must be supplied to the Content Studio drop zones as URIs encoded using the text/uri-list MIME type (or the alternative text/x-moz-url MIME type used by Mozilla-based browsers). The following example code will create two buttons in the side panel that supply either one or three auto-generated content item URIs suitable for dropping in Content Studio:

<html>
  <head>
    <title>DnD Example</title>
  </head>
  <body>
    <div id="drag-single" class="drag" draggable="true">Drag Single URI</div>
    <div id="drag-multiple" class="drag" draggable="true">Drag Multiple URIs</div>

    <style scoped="">
      .drag {
        padding: 1em 2em;
        margin: 1em 0;
        background: #CFC;
      }
    </style>

    <script type="text/javascript">
      var uriPrefix = 'http://host:port/webservice/escenic/content/';
      var articleIdStart = 1;
      var textPrefix = '#text/uri-list';
      function drag(event, count) {
        console.log('drag: %s', count);
        if (count <= 0) {
          return;
        }
        if (count == 1) {
          var data = uriPrefix + articleIdStart;
          event.dataTransfer.setData('text/uri-list', data);
          return;
        }
        var uris = [textPrefix];
        for (var i = 0; i < count; i++) {
          uris.push(uriPrefix + (articleIdStart + i));
        }
        event.dataTransfer.setData('text', uris.join('\n'));
      }
      document.getElementById('drag-single').addEventListener('dragstart', function (event) {
        drag(event, 1);
      }, false);
      document.getElementById('drag-multiple').addEventListener('dragstart', function (event) {
        drag(event, 3);
      }, false);
    </script>
  </body>
</html>

In order to try out this example, you need to replace host and port with the correct host name and port number for your Content Engine.

The Content Studio drop zones will accept correctly formatted content item URIs from external applications (browsers, for example) as well as from a side panel inside Content Studio. Not all browsers use the text/uri-list MIME type, so if you want your Javascript code to be generic and work in external browsers too, then you should also supply the URIs using the text/x-moz-url. It is perfectly OK to use both MIME types - browsers simply ignore the MIME type they don't recognize. For example:

...
        if (count == 1) {
          var data = uriPrefix + articleIdStart;
          event.dataTransfer.setData('text/uri-list', data);
          event.dataTransfer.setData('text/x-moz-url', data + '\nTitle');
          return;
        }
...