49. editConfig(drag and drop functionality) in AEM.

editConfig(drag and drop functionality) in AEM. cq:editConfig is a node of type cq:editConfig.
It difines the edit properties of a component. It enables component to appear in the sidekick or siderail. It is used to configure how a component is edited.
You can use editconfig for below fuctanality:
1) In-place editing.
2) Drag and drop.
3) Refresh a page after an author action.
In video I have covered how you can drag and drop image directly over the component without opening the dialog box using drap and drop feature of editconfig.
Create a editConfig node, now create cq:dropTarget node of type nt:unstructure. Now, create a node image of type cq:DropTargetConfig and define 3 properties here. accept, groups and propertyName. Create another node parameters of type nt:unstructured. Add the property sling:resourceType and provide the value of your compoent path here.
Now, go to your page, open the assets window and drag an image and drop it over hero component and see the change. This way author can drag and drop image easily.
share, support, like and subscribe
Subscribe : www.youtube.co....
LinkedIn : / pankaj-ch. .
Facebook : / pankajchhatri
Twitter : / pankajchhatri
Google plus : plus.google.co....
About : AEM/CQ5 tutorial is a youtube channel which helps you to learn AEM concepts theoretically as well as practically.

[@beatazadori6733]

Thanks a lot, Pankaj, great tutorial !

[@techwithmisrag8306]

Not working even after following each step. What to do?

[@visa6791]

Nice tutorial...do you have any tutorial on search using slightly?

[@naveenkumar-pf5dv]

Nice tutorial bro... I want to add only. Png type of images what can I do

[@Axe_FPV]

after enabling the drag and drop on my component, I cannot edit my video path on dialog? any help?

[@SGAEM]

Hi Pankaj, You added sling:resourceType at wrong place and still it is working somehow.You check again.

[@SGAEM]

Actually I think it is not needed But i OOTB Components it is there.Dont know why.

[@PrasannaKumar-zm1tl]

Could you help me how to read the image path and display in page using sightly?

[@AEMTutorial]

use fileReference property

[@shefalivijaykrishna]

it is not working please specify the location of sling:resourceType property is it inside hero or property node

[@beatazadori6733]

on hero

[@sudipsinha3124]

at property node