In this blog post, I’m going to show you how to enable custom drag and drop interactions in AEM Author mode. In my specific use case, I wanted to give authors the ability to drag assets and drop them into dialog field. Upon dropping, the asset path should be copied into the field.
This article assumes basic knowledge of AEM clientlibs, JavaScript, and jQuery.
First, let’s create a clientlib with appropriate categories and dependencies:
- categories: cq.authoring.dialog (this clientlib will be included as part of clientlibs for authoring dialog)
- dependencies: cq.authoring.editor (this client lib depends on editor clientlib, which has the interaction definition – we’ll get to that in a second)
Now that we have a clientlib, let’s define the interaction!
Granite.author.ui.Interaction is OOTB JavaScript prototype defined in the JCR path: /libs/cq/gui/components/authoring/clientlibs/editor/js/ui/ui.Interaction.js
Take a look at the prototype and its API.
Here is how to use Interaction to create a Drag and Drop experience:
(I’m attaching a working package to the end of this blog.)
The above code is documented line by line. But let’s explore what is happening:
Line 10-19, we define some constants for classes we’d like use later on.
Line 29, we instantiate a new Interaction via its constructor. We pass an object to the constructor that has the following properties:
- dragOrigin:{String} a CSS selector (class/id/etc) of an element that can be dragged.
- dropTarget: {String} a CSS selector (class/id/etc) of the element we can drop onto.
- start {Function} called once when we start dragging dragOrigin
- end {Function} called once at the end of interaction
- enter {Function} called when dragging dragOrigin, then entering the dropTarget
- over {Function} called when dragOrigin is dragged over dropTarget
- leave {Function} called after enter if dragOrigin leaves dropTarget
- drop {Function} called if dragOrigin is dropped onto dropTarget
Additionally, on each of those functions above, we are adding CSS classes to dropTarget backed by CSS rules that will add border styling once a user starts the interaction (drags a dragOrigin).
Line 58, we are setting the dropzone’s val to the path of the dragged image. In this case, I know the dropzone is an input.
Here is a package that you can deploy on your AEM instance:
interactionSample.zip
