= Drag and Drop for Vue

Usage:

[source,html]

The events are prefixed with dnd_, so for example dragstart is now dnd_dragstart. The reason is that all the event setup should be handled by v-dnd, and not by the user.

== Drop

v-dnd:drop sets the current element as a drop zone element. Elements can now be drag and dropped into this element.

=== Drop Callbacks

Each callback has the following arguments: data, nativeEvent, index. The index is computed only when the list modifier is applied.

Drop allows the following callbacks, with the most important ones the v-dnd:drop to configure the action to be performed when a drop is done, and @dnd_dragover to configure if a drop is accepted or not.

• v-dnd:drop - the action invoked when a drop is performed.
• @dnd_dragover - this one can be used to validate the drop. If it returns anything (i.e. not undefined) its value is considered. This can be used to validate if the drop is permitted or not.S
• @dnd_dragenter - callback called whenever a drop target enters our component
• @dnd_dragleave - callback called when a drop target leaves our component

=== css Drop Modifier

Having the css modifier permits automatically changing the CSS classes of the drop target.

• dnd-drop-target - always added to the target
• dnd-drop-hover - added when the user hovers the drop zone, removed when it doesn't hover anymore
• dnd-drop-rejected - @dnd_dragover returned false so the drop is not possible.

If the item is a list, on each child node the following classes could be added:

• dnd-drop-index-h-before
• dnd-drop-index-h-after
• dnd-drop-index-before
• dnd-drop-index-after

=== list Drop Modifier

Consider the items in the drop zone as part of a vertical list. Depending on the position of the mouse in relation to the child elements it computes an index that will be passed as the last argument.

=== hlist Drop Modifier

Same as list, but the list is horizontal.

== Drag

v-dnd:drag sets the given element as a draggable item. Itself points to either a function to retrieve the data, either the data itself.

=== Drag Callbacks

• v-dnd:drag - data to drag and drop
• @dnd_drag - called every few millis
• @dnd_dragend - when the dragging stopped.

=== css Drag Modifier

Having the css modifiers enables the dnd-drag-active class on the element whenever it's being dragged.

== Handle

v-dnd:handle permits specifying an internal node as the handle for dragging. It will implicitly set the draggable to its parent v-dnd:drag to false, and set it to true only when the mouse is inside the handle.

=== css Handle Modifier

The css modifier adds the dnd-drag-handle class on the handle.