Created
February 20, 2017 22:58
-
-
Save ahmed-musallam/21a7630ae7e8874f832fd93278f0eb6c to your computer and use it in GitHub Desktop.
How to Create ‘Drag and Drop’ Experiences for AEM authors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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.$); |
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 ?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.