Dragging a component onto something OTHER than a parsys

[joel_triemstra]

Is there a straightforward way to build a component that can accept another component being dragged on without a parsys? Eg, perhaps I define a "row" component that creates three regions, each of which can have one component added, and that component might be video player, image, text, etc. I'm currently using v5.4, but upgrading to 5.6.1 might be a possibility.

[smacdonald2008]

You can use standard HTML5 DnD. if you want. This will require custom development of a CQ component. See this community article as an example of using HTMl5 DnD with AEM: http://scottsdigitalcommunity.blogspot.ca/2012/08/creating-cq-applications-that-use-html.html.

So basically you can use JQuery to define a custom CQ component and use DIV and CSS to define valid drop zones on the CQ page. Jquery supports a lot of flexibility as well in terms of drag and drop functionality. 

[Bruce_Lefebvre]

Hi Joel,

I built an accordion component based on Bootstrap collapse which demonstrates this functionality: https://github.com/blefebvre/cq-bootstrap-accordion

You can specify the number of sections you'd like in the component using the edit dialog. If you select 3, in edit mode you will have 3 droppable parsys sections. With wcmmode=disabled you will see only one section of the accordion expanded at once. 

[joel_triemstra]

Thanks, I'll check that out. Just looking at the source on github, it looks like multiple components could be added to each parsys - is that correct? Is there a way to limit that to one item per parsys?

Scott, I was thinking more of an approach where the drag source is the Sidekick, which seems like I'd need to integrate with the ExtJS supporting CQ right?

[Bruce_Lefebvre · Accepted solution]

Correct; multiple components can be added to each parsys.

There was a question posted recently [0] with a similar ask. In short, there is no OOTB way to limit a parsys to only accept one component, nor a component that can only be placed on any given page once.

[0] http://stackoverflow.com/questions/18713857/how-to-restrict-a-component-to-add-only-once-per-page/

[smacdonald2008]

If you want to drag from sidekick - you can place components based on JQuery in the sidekick on them - however - the article that i referenced - the start zone was also on the page - not the sidekick.