= Drag and Drop for Vue
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
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
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
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_dragoverreturned false so the drop is not possible.
If the item is a list, on each child node the following classes could be added:
=== 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
list, but the list is horizontal.
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
css modifiers enables the
dnd-drag-active class on
the element whenever it's being dragged.
v-dnd:handle permits specifying an internal node
as the handle for dragging. It will implicitly set the
draggable to its parent
false, and set
true only when the mouse is inside the handle.
=== css Handle Modifier
css modifier adds the
dnd-drag-handle class on the