loading table of contents...

Studio Developer Manual / Version 2310

Table Of Contents

9.14 HTML5 Drag And Drop

Since CoreMedia 11, Studio supports HTML5 drag and drop. The main reason is to allow drag/drop operations between the Main App and the Workflow App which run in different browser windows or tabs.

The problem is that most of the Studio's drag/drop operations rely on the Ext JS framework (DragSource and DropTarget and sub-classes) which does not support HTML5 drag/drop. So an adapter was introduced by CoreMedia to mediate between Ext JS drag/drop and HTML5 drag/drop. To enable this adapter, a new configuration property enableHtml5DD was added to Ext JS' DragSource and DropTarget.

Most of the Studio's built-in drag sources and drop targets are now enabled for HTML5 drag/drop. For any custom sources and targets that should participate in HTML5 drag/drop, enableHtml5DD needs to be set. For many cases, just setting the property suffices. However, there are some potential problems to consider:

  • The Studio's built-in drag sources and drop targets typically work with drag data that carries CoreMedia data objects like content items, products, categories or projects. This automatically works with HMTL5 drag/drop enabled. The prerequisite is that they are stored in the drag data's contents or records properties.

  • If for a custom drag/drop operation other drag data is needed, you need to make sure that it is stored under the additionalData property of the drag data. Furthermore, this additional data must be JSON-serializable. Consequently, it is for example not possible to include Ext JS components (something that is sometimes done for Ext JS drag/drop classes). Instead, you could just include the component's id and use it to obtain the component in the drop handler of the drop target. However, if you encode app specific data like component ids make sure that your code is robust in a way the ids is only being interpreted from the same app.



The following explanations need to be taken with caution. Support for custom non-Ext JS drag sources and drop targets is still limited and experimental.

Using HTML5 drag/drop now allows using custom non-Ext JS drop targets that still receive drag data from Studio's "traditional" Ext JS drag sources. So it is even possible to drag from a Studio app into a custom non-Ext JS app. In the drop handler of the drop zone, you can obtain the dragged CoreMedia objects and the additional data from the DragEvent by:

// e.g. => '[{"$Ref":"content/720"},{"$Ref":"content/738"}]'

// e.g. => '{"dragItem":"com-coremedia-cms-editor-sdk-tabProxy-26",\n
// "draggedTabStripEl":"ext-comp-2877"}'

Example 9.41. Obtaining The Dragged Objects from the DragEvent

A more sophisticated option opens up if your custom drop target runs inside an app that is connected to the Studio apps via the serviceAgent from the @coremedia/service-agent npm package (both apps need to run in the same context - host and port). The following code can be executed on "dragover" as well as on "drop".

import { serviceAgent } from "@coremedia/service-agent";
import DragDropService from "@coremedia/studio-client.interaction-services-api/services/DragDropService";
import DragDropServiceDescriptor from "@coremedia/studio-client.interaction-services-api/services/DragDropServiceDescriptor";
import { as } from "@jangaroo/runtime";

const dragDropServiceDescriptor = new DragDropServiceDescriptor();
const service: DragDropService = serviceAgent.getService(dragDropServiceDescriptor);

// e.g. => '["ContentDD"]'
const dragGroups: string[] = as(JSON.parse(service?.dragGroups || null), Array) || [];

// e.g. => '{"content":[],"contents":[{"$Ref":"content/7120"},{"$Ref":"content/7328"}],\n
//  "additionalData":{"sourceViewId":"tableview-1479","viewId":"tableview-1479","copy":true}'
const dragData: Record<string, any> = as(JSON.parse(service?.dragData || null), Object) || {};

Example 9.42. Obtaining Drag Info Via the Service Agent

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.