Built Custom Widget "Draggable List"

[Leonie-Theobald]

For my GUI (especially for the phone version), I wanted to have a user-friendly way to allow reordering of elements in a list by dragging an list element to its desired line and drop it. I built a custom widget for this. Maybe somebody find this useful as well. I tried to write the code in such way that it requires minimal changes to adapt the style and list content.

If you want to check it out: DraggableList on SlintPad

⚠️ Please be aware that if you want your list to keep the new order after dragging/dropping, this requires a callback handling in the app backend. I used Rust for it (see bottom).

It would be really cool to have a built-in widget for this at some point in future. E.g. similar to VerticalLayout{} you put all your elements inside but for this DraggableVerticalLayout{} the GUI user can drag the elements. But I am not sure if this is a usecase for others as well.

Cheers, Leonie

---

Rust Callback Handling

    // callback handling after dragging for reordering list elements
    main_window_weak
        .unwrap()
        .global::<DraggableListLogic>()
        .on_moved_element_n_lines(move |element_index, line_offset| {
            let mut draggable_list = main_window_weak
                .unwrap()
                .global::<DraggableListLogic>()
                .get_list()
                .iter()
                .collect::<Vec<_>>();

            // element was not actually moved to new position
            if line_offset == 0 {
                return;
            }

            let clamped_new_position =
                (element_index + line_offset).clamp(0, draggable_list.len() as i32 - 1) as usize;
            let dragged_value = draggable_list.remove(element_index as usize);
            draggable_list.insert(clamped_new_position, dragged_value);

            main_window_weak
                .unwrap()
                .global::<DraggableListLogic>()
                .set_list(ModelRc::from(
                    draggable_list.into_iter().collect::<Vec<_>>().as_slice(),
                ));
        });