Drag and Drop Digital Assets to a Pathfield Component

[aleksitto]

Hello everyone,

I'm trying to find a way to drag and drop images from the left panel to a pathfield component but still can't find a solution.

I've tried to create a plugin that adds a listener on render event of the pathfield component and creates Ext JS DropTarget but it works only with my own Ext JS components.

Looks like CQ5 has own implementation of drag&drop images or I'm doing something wrong...

Here is my listener:

widget.addListener("render", function(e) { var dropTarget = new CQ.Ext.dd.DropTarget(e.getId(), { ddGroup: ["media", "editcomponent"], groups: ["media", "editcomponent"] }); dropTarget.notifyDrop = function(dd, ee, data) { ... } });

where widget is the pathfield component.

I've also tried to use different ddGroups definitions, e.g. "media", ["media"], "[media]", ["media", "editcomponent"], etc... or even without it at all but it doesn't work.

Maybe this can be done in any other way because I just need to fill a content path of a dragged and dropped image in the pathfield component.

Thanks guys any help is really appreciated

[Sham_HC]

is notifyDrop method not called ?  In your notifyDrop method insert the value for pathfield & I am not seeing that in your implementation. 

[aleksitto]

Yep, notifyDrop method is not called. That's the problem.

dropTarget.notifyDrop = function(dd, ee, data) { alert(data); }

[aleksitto]

Any ideas?

[justin_at_adobe · Accepted solution]

A widget with this capability is available in the ACS AEM Commons library. See details here: http://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html

[aleksitto]

Excellent! Thank you very much