Studio Developer Manual / Version 2404
Table Of ContentsSince 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
contentsorrecordsproperties.If for a custom drag/drop operation other drag data is needed, you need to make sure that it is stored under the
additionalDataproperty 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'sidand 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.
Caution
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:
dragEvent.dataTransfer.getData("cm/uri-list")
// e.g. => '[{"$Ref":"content/720"},{"$Ref":"content/738"}]'
dragEvent.dataTransfer.getData("cm/additional")
// 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
