Skip to content

Kirby 3.9.8

Draggable

<k-draggable>

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