# Examples

TIP

Attach vue-draggable directive on d&d wrapper element and you are ready to start. If you want to change default draggable and droppable elements you can pass new values dropzoneSelector and draggableSelector. By default selectors are 'ul' and 'li'.

TIP

Multiple callbacks available for useonDragstart, onDrop, onDragend.

• onDragend is always triggered even if item is dropped in invalid dropzone.

• onDrop is triggered only when items are dropped in valid dropzones.

• onDragstart is always called when D&D starts.

Data passed to callbacks:

{
  nativeEvent: {}, // native js event
  items: [], // list of selected draggable elements
  owner: null, // old dropzone element
  droptarget: null // new dropzone element,
  stop: () => {} // Stop D&D (available only for callbacks `onDragstart` and `onDragend`)
}