How to Create ‘Drag and Drop’ Experiences for AEM authors

DnDInteraction.js

/* JsLint ignore Granite object from validation */
/* globals Granite*/

//define new interaction for dropping assets into fields, this wil copy the Asset's path into the field
var customePathbrowserInteraction;
(function (Granite, $) {

  if (Granite && Granite.author && Granite.author.ui && Granite.author.ui.Interaction) {
    // selector of element we want to drag
    var DRAGGABLE_SELECTOR = '.cq-draggable.card-asset',
      // selecttor of target element
      DROP_TARGET_SELECTOR = '.js-coral-pathbrowser-input',

      // class to be added when dropzone is active, ie. we started dragging
      // use this class to add some border color to indicate that element is droppable in this zone
      DROPZONE_ACTIVE = 'custom-dropzone-active',
      // class to be added when dragged element is over dropzone
      // use this class to add some border color to indicate that element is droppable in this zone
      DROPZONE_OVER = 'custom-dropzone-over',
      
      // true to log all events
      logMessages = true;
    
      var log = function(msg){
        if(logMessages){
          console.log(msg);
        }
      };
    customePathbrowserInteraction = customePathbrowserInteraction || new Granite.author.ui.Interaction({
      // The selector of elements that can be dragged
      dragOrigin: DRAGGABLE_SELECTOR,
      // The drop target/ drop zone element selector
      dropTarget: DROP_TARGET_SELECTOR,

      // when entering dropTarget
      enter: function (e) {
        log("enter");
        if (e.target) {
          $(e.target).addClass(DROPZONE_OVER);
        }
      },
      // when over dropTarget
      over: function () {
        log("over");
      },
      // when leaving dropTarget
      leave: function (e) {
        log("leave");
        if (e.target) {
          $(e.target).removeClass(DROPZONE_OVER).addClass(DROPZONE_ACTIVE);
        }
      },
      // when dropping dragOrigin into dropTarget
      drop: function (e) {
        log("drop");
        if (e.target && this.path) {
          var $target = $(e.target);
          $target.val(this.path);
          // optional to check if the input fiels is valid
          $target.checkValidity();
          $target.updateErrorUI();
        }
      },
      // when starting to drag dragOrigin
      start: function (e) {
        log("start");
        this.path = (e.target) ? $(e.target).data("path") : "";
        this.$dropTarget = $(DROP_TARGET_SELECTOR);
        this.$dropTarget.addClass(DROPZONE_ACTIVE);
      },

      // end drag or dropped
      end: function () {
        log("end");
        this.$dropTarget.removeClass(DROPZONE_ACTIVE).removeClass(DROPZONE_OVER);
      }
    });
  }
})(Granite, Granite.$);

Ahmed, this is great work. I am trying to learn from what you did here but I am lost on how you're using Granite as an object. How did you learn to do this, is there any documentation I can read about this?

Thanks.

This was actually a result of a lot of investigation into Adobe’s code. I am not sure if it’s documented anywhere.

I appreciate the reply, Ahmed. I was actually having issues making this work for the pathfield in AEM 6.4. Your code worked beautifully for the pathbrowser, but because of the way the pathfield works I had to do some more research. But I was able to get it working. Thanks for making this available!

How to add custom image ghost ?