AEM CQ 56 - Sample EditConfig Listener for Drag & Drop

Goal


Simple cq:editConfig listener fired when an image is drag and dropped from content finder onto the component. Check the demo

Solution


1) Set a listener on cq:editConfig, fired on ready event




2) Add the following code in listener

function () {
        if (!this.subDropTargets || ( this.subDropTargets.length === 0 )) {
            return;
        }

        var dt = this.subDropTargets[0];

        dt.notifyEnter = function (dragSource, e, data) {
            CQ.wcm.EditRollover.DropTarget.prototype.notifyEnter.call(this, dragSource, e, data);

            setTimeout(function () {
                alert("Image Dropped - " + data.records[0].id)
            }, 500);
        }
}

8 comments:

  1. Good insight I really like your website Sreekanth it's been a really good resource for my development team...Thanks

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. iam new cq5 can u provide basic extjs sample codes

    ReplyDelete
    Replies
    1. Venky, what is it specifically you are looking for

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi Sreekanth,
    I just added "cq:listener" node of type "cq:EditListenersConfig" under "cq:editConfig" node and added a property "ready" with value as
    "function() { alert("Image Uploaded"); }". As you said I should get an alert on drop of image, but i'm not getting the alert message on Drop of an image.
    Instead after submitting the dialog, I just refreshed the page then I was getting the alert message.

    Could you please tell me what I'm missing out ?

    AEM Version - 6.1 (Classic UI)

    ReplyDelete