Skip to content

Instantly share code, notes, and snippets.

Created February 20, 2017 22:58
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
How to Create ‘Drag and Drop’ Experiences for AEM authors
/* 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 && && && {
// 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){
customePathbrowserInteraction = customePathbrowserInteraction || new{
// The selector of elements that can be dragged
// The drop target/ drop zone element selector
// when entering dropTarget
enter: function (e) {
if ( {
// when over dropTarget
over: function () {
// when leaving dropTarget
leave: function (e) {
if ( {
// when dropping dragOrigin into dropTarget
drop: function (e) {
if ( && this.path) {
var $target = $(;
// optional to check if the input fiels is valid
// when starting to drag dragOrigin
start: function (e) {
this.path = ( ? $("path") : "";
this.$dropTarget = $(DROP_TARGET_SELECTOR);
// end drag or dropped
end: function () {
})(Granite, Granite.$);
Copy link

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?


Copy link

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

Copy link

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!

Copy link

sks40gb commented Dec 14, 2020

How to add custom image ghost ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment