Drag and drop
All KVision components have built-in support for HTML5 drag and drop. Any component can be draggable and any other component can play a role of a drop target. To make a component draggable just call
setDragDropData
method, defined in the Widget
class. You can set data format (it can be "text/plain" or other mime-type) and the data itself.val element = Div("Element", align = Align.CENTER) {
setDragDropData("text/plain", "element")
}
To create a drop target call
setDropTargetData
method. Use the data format parameter to allow dropping chosen draggables. You can access the data transferred from the source element in the callback function.panel.setDropTargetData("text/plain") { data ->
if (data == "element") {
panel.add(element)
}
}
Last modified 3mo ago