Feature request: Haptic feedback (vibration)

[elad-nanit]

Please add a haptic feedback (vibration) when item is long pressed and ready to be dragged.

[ShayDeeJay]

Please add a haptic feedback (vibration) when item is long pressed and ready to be dragged.

im sure you probably already know this, but you can add this feature manually.

[CiprianGabor]

Where I can add the haptic feedback?

LazyColumn(
        state = state.listState,
        modifier = Modifier
            .reorderable(state)
            .detectReorderAfterLongPress(state)
    ) {
        items(data.value.size, { data.value[it] }) { item ->
            ReorderableItem(state, key = item) { isDragging ->
                val elevation = animateDpAsState(if (isDragging) 46.dp else 0.dp)
                Column(
                    modifier = Modifier
                        .shadow(elevation.value)
                        .background(MaterialTheme.colorScheme.surface)
                ) {
                    ShowCategoryDivider(data.value[item])
                }
            }
        }
    }

[ShayDeeJay]

ReorderableItem(state, key = items.key) { isDragging ->
if (isDragging) haptic.performHapticFeedback(
HapticFeedbackType.LongPress
)

[CiprianGabor]

It does not work. isDragging is always false

[ShayDeeJay]

add detect reorder to the column

[CiprianGabor]

Like this?

LazyColumn(
        state = state.listState,
        modifier = Modifier
            .reorderable(state)
            .detectReorderAfterLongPress(state)
    ) {
        items(data.value.size, { data.value[it] }) { item ->
            ReorderableItem(state, key = item) {  isDragging ->
                if (isDragging) haptic.performHapticFeedback(
                    HapticFeedbackType.LongPress
                )
                val elevation = animateDpAsState(if (isDragging) 46.dp else 0.dp)
                Column(
                    modifier = Modifier
                        .shadow(elevation.value)
                        .background(MaterialTheme.colorScheme.surface)
                        .detectReorderAfterLongPress(state)
                ) {
                    ShowCategoryDivider(data.value[item])
                }
            }
        }
    }

[ShayDeeJay]

yes, and remove from lazy column

[CiprianGabor]

Like this? It wont work

LazyColumn(
        state = state.listState,
        modifier = Modifier
            .reorderable(state)
    ) {
        items(data.value.size, { data.value[it] }) { item ->
            ReorderableItem(state, key = item) { isDragging ->
                if (isDragging) haptic.performHapticFeedback(
                    HapticFeedbackType.LongPress
                )
                val elevation = animateDpAsState(if (isDragging) 46.dp else 0.dp)
                Column(
                    modifier = Modifier
                        .shadow(elevation.value)
                        .background(MaterialTheme.colorScheme.surface)
                        .detectReorderAfterLongPress(state)
                        .animateItemPlacement( animationSpec = tween( durationMillis = 100, easing = FastOutSlowInEasing ) )
                ) {
                    ShowCategoryDivider(data.value[item])
                }
            }
        }
    }

[CiprianGabor]

@aclassen @shadyeejay @warting Any idea?
Have a nice day!

[CiprianGabor]

The problem was with the items(size) function, you have to use items(list) in order to work.

this will work:

LazyColumn(
        state = state.listState,
        modifier = Modifier
            .reorderable(state)
            .detectReorderAfterLongPress(state)
    ) {
        items(data.value, { it }) { item ->
            ReorderableItem(state, key = item) { isDragging ->
                if (isDragging) haptic.performHapticFeedback(
                    HapticFeedbackType.LongPress
                )
                val elevation = animateDpAsState(if (isDragging) 50.dp else 0.dp)
                Column(
                    modifier = Modifier
                        .shadow(elevation.value)
                        .background(MaterialTheme.colorScheme.surface)
                ) {
                    ShowCategoryDivider(item)
                }
            }
        }
    }