Draggable

<k-draggable>

kirby/panel/src/components/Misc/Draggable.vue

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

The Draggable component implements the Vue.Draggable library which is a wrapper for the widespread Sortable.js library.

<k-draggable>
  <li>Drag me.</li>
  <li>Or me.</li>
  <li>Drop it!</li>
</k-draggable>

Props

Prop	Type	Default	Description
data	`object`	–
element	`string`	–	HTML element for the wrapper
handle	`string`\|`boolean`	–	Whether to use a sort handle or, if yes, which CSS selector can be used
list	`array`\|`object`	–
move	`func`	–
options	`object`	–

Slots

Slot	Description
default
footer

Please find all documentation regarding the possibilities over on the Vue.Draggable documentation. Whenever you read <draggable> there, think <k-draggable>.

CSS classes

.k-draggable