Drag and drop feature in publisher

[kishore_polsani]

Hi,

How can we enable drag and drop feature on AEM webpage hosted on publisher.

Usecase:

Consider two Divs on a webpage, I want to rearrange the DIVs on my webpage by drag and drop.

I understand this is more of UI related stuff. Any pointers how we can achieve this?

-Kishore

[smacdonald2008]

You do not - you drag and drop components in the Author environment. Then you publish (or Activate) the pages to push them out to the Publisher instance. This is the way AEM works.

[Ratna_Kumar]

Hi,

This is very bad practice. In AEM you cannot use Publisher as author instance.

If you want to do drag and drop,  you need to do only in author instance and publish the page and all the content will pushed into Publish instance(Live site)

~ Ratna.

[kishore_polsani]

Hi Ratna/Scott,

In my question I didn't say that I will drag and drop a component. Can we give the user to drag and drop or rearrange a section of a webpage via dispatcher and can view the reordered page later?

I have just tried Jquery Draggable feature and I am able to rearrange the sections on my webpage. Once I refresh the page it reverted back to old design. Is there any way to maintain the arrangement after page refresh?

[smacdonald2008 · Accepted solution]

If you want to re-order sections on a web page - you can use standard JQuery functionality to do so. Once the page renders in a browser - the web visitor will be able to drag the elements around (the elements that have been identified using JQuery).

Here is an old community article that shows use of AEM and JQuery to do similar functionality....

Scott's Digital Community: Creating CQ applications that use HTML Drag and Drop

[kautuk_sahni]

Template Editor is closest to what you are trying to achieve. In Layout mode/Inline layout to can do that. You can also assign policy with it.

Video:- Template Editor Enhancements in AEM 6.3

GEM Session :- Managing your content with the template editor of Adobe Experience Manager

~kautuk