Adobe Experience Manager: How to enable drag and drop an asset into a PathField.

Description

From AEM 6.5.10, you can drag and drop an asset from the asset browser into a PathField on the page editor.
This article explains how to enable this feature.

This feature corresponds to the below line in AEM 6.5.10 release notes.
https://experienceleague.adobe.com/docs/experience-manager-65/release-notes/service-pack/6.5.10.html?lang=en

  • PathField in Sites editor allows authors to drag assets from Content Finder.

Environments
AEM as a Cloud service, AEM 6.5.10 or later

Resolution

Add the droppable property to the node of PathField.

  name: droppable
  type: Boolean
  value: true

Customization Example
A PathField with droppable=true, added to the HelloWorld component of the WKND tutorial, as /apps/wknd/components/helloworld/cq:dialog/content/items/column/items/path: 

?xml version="1.0" encoding="UTF-8"?
    jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        jcr:primaryType="nt:unstructured"
        jcr:title="Properties"
        sling:resourceType="cq/gui/components/authoring/dialog"
        content
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
            items jcr:primaryType="nt:unstructured"
                column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/container"
                    items jcr:primaryType="nt:unstructured"
                        text
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                            fieldLabel="Text"
                            name="./text"/
                        path
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                            fieldLabel="Path"
                            droppable="{Boolean}true"
                            name="./path"/
                    /items
                /column
            /items
        /content
    /jcr:root

On this page