#question How to implement reorder lazy list item...

# compose

[Nurlibay]

#question

How to implement reorder lazy list items by drag and drop?
I haven't found a good solution

[Altynbek Nurtaza]

Hi, take a look at this

[Kartik Sharma]

https://github.com/Calvin-LL/Reorderable

[Alex Styl]

@Nurlibay what is your use case and what are u missing?

[Nurlibay]

https://github.com/Calvin-LL/Reorderable

I used it

[Nurlibay]

But in my case is it not working

[Nurlibay]

@OptIn(ExperimentalMaterial3Api::class)
@Composable
internal fun PaymentImportSettingsCompose(
    modifier: Modifier = Modifier,
    viewModel: PaymentImportSettingsVM = hiltViewModel(),
    activity: Activity,
    onBackClicked: () -> Unit,

) {
    var uploadedFileName by remember { mutableStateOf("") }
    var fileFormat = ""
    var mFile by remember { mutableStateOf<File?>(null) }
    var showLoader by remember { mutableStateOf(false) }
    val context = LocalContext.current
    val fileFormatState = viewModel.fileFormat.collectAsStateWithLifecycle()
    var importFieldList by remember { mutableStateOf<List<PaymentImportFieldEntity>>(emptyList()) }
    
    val isButtonEnabled by remember { derivedStateOf {
        mFile != null && importFieldList.isNotEmpty() }
    }

    val view = LocalView.current
    val lazyListState = rememberLazyListState()
    val reorderableLazyListState = rememberReorderableLazyListState(lazyListState) { from, to ->
        importFieldList = importFieldList.toMutableList().apply {
            add(to.index - 2, removeAt(from.index - 2))
        }

        ViewCompat.performHapticFeedback(
            view,
            HapticFeedbackConstantsCompat.SEGMENT_FREQUENT_TICK
        )
    }

    val filePickerLauncher = rememberLauncherForActivityResult(ActivityResultContracts.GetContent()) { uri: Uri? ->
            uri?.let {
                uploadedFileName = getFileNameFromUri(context, it).orEmpty()
                mFile = getFileFromUri(context, it)
            } ?: run {

            }
        }

    val fieldListState by viewModel.paymentImportFieldListFlow.collectAsStateWithLifecycle()

    FullScreenLoader(isLoading = showLoader)

    LaunchedEffect(true) {
        viewModel.uploadPaymentImportExcelFlow.collect {
            when(it) {
                UiState.Loading -> {
                    showLoader = true
                }
                is UiState.Error -> {
                    showLoader = false
                    showErrorToast(it.message, context, activity)
                }
                is UiState.Success -> {
                    showLoader = false
                    ExternalStorageUtil.openFile(
                        context = context,
                        filepath = it.data.toString(),
                        mimeType = ExportType.EXCEL.mimeType.orEmpty()
                    )
                }
                else -> showLoader = false
            }
        }
    }
    LaunchedEffect(true) {
        viewModel.uploadPaymentImportTextFlow.collect {
            when(it) {
                UiState.Loading -> {
                    showLoader = true
                }
                is UiState.Error -> {
                    showLoader = false
                    showErrorToast(it.message, context, activity)
                }
                is UiState.Success -> {
                    showLoader = false
                    ExternalStorageUtil.openFile(
                        context = context,
                        filepath = it.data.toString(),
                        mimeType = ExportType.TXT.mimeType.orEmpty()
                    )
                }
                else -> showLoader = false
            }
        }
    }
    LaunchedEffect(true) {
        viewModel.importPaymentQueueFlow.collect {
            when(it) {
                UiState.Loading -> {
                    showLoader = true
                }
                is UiState.Error -> {
                    showLoader = false
                    showErrorToast(it.message, context, activity)
                }
                is UiState.Success -> {
                    if(it.data.success == true) {
                        showSuccessToast(it.data.message.orEmpty(), context, activity)
                    } else {
                        showErrorToast(it.data.message.orEmpty(), context, activity)
                    }
                    showLoader = false

                }
                else -> showLoader = false
            }
        }
    }

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = {
            ComposeTopAppBar(
                title = stringResource(R.string.lbl_import_settings),
                modifier = Modifier
                    .fillMaxWidth()
                    .background(colorResource(R.color.colorBackground2))
            ) {
                onBackClicked.invoke()
            }
        }
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .background(color = colorResource(R.color.colorBackground2))
                .padding(innerPadding),
            state = lazyListState,
        ) {
            item {
                ...
            }
            item {
                ...
            }
            when(fieldListState) {
                UiState.Loading -> {
                    item { ProgressBarCompose(modifier = Modifier.padding(16.dp)) }
                }
                is UiState.Error -> {
                    item {
                        ShowErrorContainer(errorMessage = (fieldListState as? UiState.Error)?.message.orEmpty())
                    }
                }
                is UiState.Success -> {
                    importFieldList = (fieldListState as UiState.Success<List<PaymentImportFieldEntity>>).data
//                    item {
//                        Box(
//                            modifier = Modifier
//                                .fillMaxWidth()
//                                .height(4.dp)
//                                .background(
//                                    shape = RoundedCornerShape(topEnd = 16.dp, topStart = 16.dp),
//                                    color = colorResource(R.color.colorSurfaceBackgroundPrimary)
//                                )
//                        ) {}
//                    }
                    items(importFieldList, key = { it.id.orEmpty() }) {
                        Timber.tag("NNN").d(importFieldList.toString())
                        ReorderableItem(reorderableLazyListState, key = it) { isDragging ->
                            PaymentImportFieldItemCompose(field = it, modifier = Modifier.draggableHandle())
                            Text(
                                text = it.content.orEmpty(),
                                style = TextStyle(
                                    fontSize = 15.sp,
                                    fontWeight = FontWeight.W400,
                                    color = colorResource(R.color.colorTextPrimary)
                                ),
                            )
                        }
                    }
//                    item {
//                        Box(
//                            modifier = Modifier
//                                .fillMaxWidth()
//                                .height(8.dp)
//                                .background(
//                                    shape = RoundedCornerShape(
//                                        bottomStart = 16.dp,
//                                        bottomEnd = 16.dp
//                                    ),
//                                    color = colorResource(R.color.colorSurfaceBackgroundPrimary)
//                                )
//                        ) {}
//                    }
                }
                else -> Unit
            }
            item {
               ...
            }
            item {
                ...
            }
        }
    }
}