Clever Geek Handbook

Having multiple cq: dropTargets in one component

I managed to implement my only cq: dropTarget in my component with the following descriptive code:

<div data-sly-test="${wcmmode.edit}" class="cq-dd-videoplayer" data-sly-text="Drop video here"></div>

And cq: dropTargets is configured like this:

    <cq:dropTargets jcr:primaryType="nt:unstructured">
        <videoplayer
            jcr:primaryType="cq:DropTargetConfig"
            accept="[video/.*]"
            groups="[media]"
            propertyName="./videoPath"/>
    </cq:dropTargets>

This works great ... The problem I am running into is that one component has multiple cq: dropTargets. The problem is that when I drop an asset into one of the cq: dropTargets, both values ​​in dropTargets are updated with the same value.

This is my current setup:

beautiful:

<div data-sly-test="${wcmmode.edit}" class="cq-dd-videoplayer cq-video-placeholder cq-block-sm-placeholder md-dropzone-video" data-sly-text="Drop video here"></div>

    <div data-sly-test="${wcmmode.edit}" class="cq-dd-imageofplayer cq-video-placeholder cq-block-sm-placeholder md-dropzone-video" data-sly-text="Drop image here"></div>

CQ: dropTargets

<cq:dropTargets jcr:primaryType="nt:unstructured">
    <videoplayer
        jcr:primaryType="cq:DropTargetConfig"
        accept="[video/.*]"
        groups="[media]"
        propertyName="./videoPath"/>
    <imageofplayer
        jcr:primaryType="cq:DropTargetConfig"
        accept="[image/.*]"
        groups="[media]"
        propertyName="./imagePath"/>
</cq:dropTargets>

so now. / videoPath and. / imagePath become the same value from the dragged asset.

+2


source to share


2 answers


On August 22, 2015, a new patch CQ-6.1.0-FEATUREPACK-6563 was released that resolved this issue. Related bugs fixed: - CQ-39715 - Make multiple in-place editors smarter - CQ-41631 - Unable to place multiple file upload widgets in one dialog box - CQ-42676 - In-place editing does not work for static enabled components



So now you need to create inside cq: inplaceEditing node cq: childEditors primaryType unstructured and inside this node of type cq: ChildEditorConfig for each element consisting of two properties: "title" and "type" where the title will be displayed in the dropdown when you will click the edit link. I have created a 3 column image component and I can drag and drop images from Content Finder for each one. Custom dropdown menu Also, the Configuration section works with 3 tabs where I can drag / drop images for each one. Configure section I suggest using wcm / foundation / components / textimage as an example. Links: https://docs.adobe.com/docs/en/aem/6-1/develop/components/multiple-inplace-editors.html

+1


source


Are you trying to delete the image after the video? If yes, just looking at cq:dropTargetConfig

for "imageofplayer", according to the docs , the accept

property value should be "Regex applied to the asset mime type to validate if dropping is allowed."

So if you are trying to delete an image it should be:



accept="[image/.*]"
0


source






More articles:


All Articles