AEM 6.5 Classic UI – How to completely disable drag/move (make component non-draggable) using client-side JavaScript / clientlib?

[maheswaraiah_m]

In AEM Classic UI, what is the correct and reliable client-side way (via JS in a clientlib) to make a component completely non-draggable / non-movable while keeping the rest of the page functional?

[PRATHYUSHA_VP]

Hi @maheswaraiah_m 

You need to convert classic AEM dialog into Coral AEM dialog as per recommendation. Then you can create custom JS using coral API to hide the required tab and add JS as part of extraClientlibs in your dialog

Coral API : https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Dialo...

Hope this helps 

Thanks

[Karishma_begumSh · Accepted solution]

Hi @maheswaraiah_m 

Add this JS in a clientlib with category cq.wcm.edit:

CQ.WCM.on("editablesready", function () {
    CQ.WCM.getEditables().forEach(function (e) {
        if (e.type === "myproject/components/nonmovable") {
            e.dragger = null;        // disable dragging
            e.dropTargets = [];      // disable moving
        }
    });
});

Hope this helpful:)

Regards,

Karishma.