Overview of cq:dropTagets in cq:editConfig Node in AEM

In this blog, we will talk about “cq:dropTargets” feature of “cq:editConfig” node.

cq:dropTargets(of type nt:unstructured) is the child node of cq:editConfig
(of type cq:EditConfig) node and defines a list of drop targets that can accept a drop from an asset of the content finder as shown in the image below. It serves as a collection of nodes of type cq:DropTargetConfig.

Fig:1- Assets in content finder

Note: Multiple drop targets are only available in the classic UI.
In the touch-enabled UI, a single drop target is allowed.

Each child node of type cq:DropTargetConfig defines a drop target in the component. The node name was so fix till AEM 6.2, but as now from AEM 6.3, the node name is so flexible and we can use any nodenam,still, we will try to use nodename as OOTB components are using.

The node of type cq:DropTargetConfig needs to have the following properties:
Property Name
Property Value

accept: Regex applied to the asset mime type to validate if dropping is allowed.
groups: Array of drop target groups. Each group must match the group type that is defined in the content finder extension and that is attached to the assets.
propertyName: Name of the property that will be updated after a valid drop.

Why to use dropTargets in a component?
It is not really necessary to use dropTarget as you can configure image,video after opening the dialog, but it is good to use feature if without opening dialog, you can just drag and drop the image from the content finder inside the dialog.

So personally, I would like to go with this feature for every possible component where I can use it.

So question comes here, in which components we can use this feature? We can use this in any component where I can drag and drop any asset using content finder Image,Video,Audio,any component having a page Path configuration etc.

Variations of Drop Targets in a Component

Image Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
<image
jcr:primaryType="cq:DropTargetConfig"
accept="[image/.*]"
groups="[media]"
propertyName="./fileReference">
<parameters>
sling:resourceType:”relative path of the component”
</parameters>
</image>
</cq:dropTargets>

Confusion: I have seen sling:resourceType in the “parameters” node pointing to itself for only image,video and audio dropTargetConfig nodes and what I understood from forums about it is “sling:resourceType as necessary to tell which component is supposed to render the content that gets dragged and dropped.”

My Observation: But my observation is that if you don’t put resourceType also, still things will work fine for image, video and audio components. But I recommend that you use resourceType as it is given in all OOTB Components so there may be situations where it is needed. If I will get to know the use case of adding this property, I will let you know.

Video Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
<video
jcr:primaryType="cq:DropTargetConfig"
accept="[video/.*]"
groups="[media]"
propertyName="./fileReference">
<parameters>
sling:resourceType:”relative path of the component”
</parameters>
</video>
</cq:dropTargets>

Audio Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
<audio
jcr:primaryType="cq:DropTargetConfig"
accept="[audio/.*]"
groups="[media]"
propertyName="./fileReference">
<parameters>
sling:resourceType:”relative path of the component”
</parameters>
</audio>

Any component having Page Path:
<cq:dropTargets jcr:primaryType="nt:unstructured">
<pages
jcr:primaryType="cq:DropTargetConfig"
accept="[.*]"
groups="[page]"
propertyName="./pages"/>
</cq:dropTargets>

Download Component:
<cq:dropTargets jcr:primaryType="nt:unstructured">
<file
jcr:primaryType="cq:DropTargetConfig"
accept="[.*]"
groups="[media]"
propertyName="./fileReference"/>
</cq:dropTargets>

Note: In AEM 6.4 fresh instance, cq:dropTargets don’t work so you need to add service pack (Service Pack 6.4.2) to the instance. So if you face this issue in any other version so maybe you need to upgrade your AEM instance with a service pack.