How would I being with implementing reordering by dragging and dropping items in some list/col/row/g...

# compose-web

[Erik]

How would I being with implementing reordering by dragging and dropping items in some list/col/row/grid, or maybe a table, with compose for web?

[hfhbd]

Just use onDrop, onMove etc.
This code might not work, copy/pasta from my project, but you get the idea.

var newItem: Question? by remember { mutableStateOf(null) }
var questions by remember { mutableListOf() }

for (question in questions) {
  Div(attrs = {
    draggable(Draggable.True)
     onDragStart {
       newItem = question
     }
     onDragOver { event ->
       event.nativeEvent.preventDefault()
     }
     onDrop { event ->
       event.nativeEvent.preventDefault()
       val item = requireNotNull(newItem) { "onDrop in question list $title" }
       val changed = questions.toMutableList().apply {
         remove(item)
         add(index, item)
       }
       newItem = null
     }
  }) {
    Text(question.title)
  }
}

[hfhbd]

Maybe you could find a better solution instead, eg with mutableStateList 😄

[Oleksandr Karpovich [JB]]

compose has movableContentOf - https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/runtime/design/movable-content.md

I haven't tried it for drag and drop though, but it seems to be applicable.

it's no available in 1.1 release, but it should be available in more recent 1.2.0-alpha builds

[hfhbd]

Nice, I will try it next days. But you would still need onMove onDrop etc to get droppable HTML support