It is very important to give the user a visual cue or hint about what to do next during a Drag & Drop interaction. There are 3 major points when you should trigger some good visual cue to draw the user's attention or give them a hint about what to do next.

1. When the user hovers on the source object that can be dragged.
   An widely used method would be changing the cursor shape when it is placed over one of the source objects. Also showing up a tooltip message might be good.
2. When the user starts dragging.
   You should give the users hints about which object might be a target on which they can drop the source. Basically, the targets need to be emphasized enough to draw attention and invite the users to drag the source toward them.
3. When the user is dragging the source over one of the targets.
   When the source and one of the targets overlap sufficiently, the target (the source, alternatively) should give the user a clue that it is ready for a drop so that he or she can be finally aware that it's the right time to drop the source on the target.

Implementing these visual cues on your own may be kind of fun, but time-consuming. DNDX.JS provides you several built-in visual cues that can be used out of box.

To apply a visual cue to a particular pair of source and target, you do like so:

    dndx(".draggable", ".droppable")
        .visualcue("Exterior");

dndx([CSS selector for sources], [CSS selector for targets]) creates or retrieves a pair object involving the sources (objects being dragged) and targets (objects waiting for a source to be dropped on them).
Notice that a pair is a basic unit in terms of data management in DNDX.JS.

.visualcue(param) method accepts one parameter. (For now at least. Additional parameters might be added in the future)

• To apply one of the built-in visual cues, pass in a string as param (The string should be picked from the predefined list. See below)
• To apply a custom visual cue, pass in a callback function implementing your customized visual cue.

DNDX.JS provides built-in visual cues as follows.

• "Overlay"
• "Swing"
• "Exterior"
• "Underline"
• "Arrow"
• "Nothing" (indicating no visual cue at all)

Just by passing one of the above strings as the parameter to .visualcue() method, you can add a decent visual effect to your Drag & Drop interaction. It's simple.

You can check out each of built-in visual cues in the demo.

1. Go to the demo page and click the 2nd tab saying "Demo - Basic"
2. You can find a selectable menu saying "Select Visualcue" at the upper right of the page.
3. Select the menu for the visual cue you'd like to check.
4. Drag one of the source objects (saying "Drag Me") at the bottom of the page.

Unfortunately, configuring those prebuilt visual cues for your own taste is not possible as of now. I couldn't find a good way to do that because of technical issues coming from CSS restrictions or my own limit in terms of knowledge and creativity.

Instead, DNDX.JS lets you pass a callback function to .visualcue() method and DNDX.JS will call the callback at the proper time of events and you are free to implement the callback.

First, you need to be aware of when your callback is supposed to be invoked. In DNDX.JS, important events are as follows when it comes to visual cues.

• dropactivate
• Triggered when a source object starts dragging. If you want to give target objects some attractive visual effect to indicate that they can accept the source, this event is the right place to do that.
• dropdeactivate
• Triggered when a source object stops dragging. This is the place to remove any visual cue or behavior you have previously installed.
• dropover
• Triggered when a source object is dragged over one of target objects. Often, you need to give your users another visual cue to indicate that the source is touching the target and ready to drop on it finally. After this event, either of dropout or drop event is supposed to happen.
• dropout
• Triggered when a source object is dragged out of the target.
• drop
• Triggered when a source object is dropped on the target.

Above events are all defined by jQuery UI Droppable widget used by DNDX.JS.
jQuery UI also defines a few more events involved with Drag & Drop, But the above events are most important to understand.

The following sample code is a callback for a customized visual cue:

        function visualcue(eventType, $srcObj, $tgtObj) {
            switch (eventType) {
            case "dropactivate": 
                $tgtObj.addClass("dndx-visualcue-exterior-aqua");
                break;
            case "dropdeactivate": 
                $tgtObj.removeClass("dndx-visualcue-exterior-aqua");
                break;
            case "dropover": 
                $tgtObj.addClass("dndx-visualcue-interior-red");
                break;
            case "dropout":
            case "drop":
                $tgtObj.removeClass("dndx-visualcue-interior-red");
                break;
        }

Following parameters will be given at the invocation of the callback:

• eventType : A string of the current event type.
• $srcObj : A jQuery object for the source
• The number of instances is one because DNDX.JS doesn't support multiple dragging as of now.
• $tgtObj : A jQuery object for the target
• Notice that the number of instances are usually many at the event of "dropactivate" or "dropdeactivate".
• The number of instance is one at the event of "dropover" or "dropout" or "drop" because these events require one on one (a single source object VS a single target object) interaction.

Mostly, what you do is applying CSS styles to the target objects as demonstrated at the above example code. That will be the most simple and easy way. When you want to make your effects configurable by means of external parameters or show some rare visual effects that cannot be achieved so easily by CSS (such as effects using HTML5 Canvas API, ...), you need to implement some JavaScript code to achieve your goal and call it from the callback.

Note that several graphics effects implemented by DNDX.JS are reusable as components. You can make use of those utility methods whenever you think they fit your own visual cues.

Most of visual cues are involved with target objects, however, for some use cases, you may need to give some special appearances to the source object. The following additional events will provide you the proper timing for that.

• dragstart
• Triggered when dragging starts. Unlike the dropactivate event, this event involves no target object. If you want to give the source object some special effect (e.g., making it transparent), this is the place to do that.
• dragstop
• Triggered when dragging stops. Unlike dropdeactivate event, this event involves no target object.

When you want the source object seen transparent while being dragged, you can do as follows using .onstart() and .onstop() methods:

    dndx(".draggable")
        .onstart(function(eventType, $srcObj) {
            $srcObj.css("opacity", "0.5");
        })
        .onstop(function(eventType, $srcObj) {
            $srcObj.css("opacity", "");
        });

And another interesting topic is the cursor. Conventionally, in many UI applications, the cursor transforms into another shape when users hover on objects that can be dragged. This is for signifying that the object is draggable (or at least, able to be pressed. Usually, giving the user a message that the object is draggable only by the cursor shape is kind of a big challenge in my opinion, though).

DNDX.JS provides .cursor(typeForDrag, typeForHover) method to customize the cursor types.

    dndx().cursor("moving", "pointer");

The above example code specifies the cursor types for drag time and hover time, respectively. And the configuration will take effect for all the pairs currently managed by DNDX.JS because you haven't specified any CSS selector on dndx() function. ( See this concept for more detail. )

• DNDX.JS API References
• DNDX.JS Demo
• DNDX.JS Github project