danpalmz / leptos-drag-drop-list

Leptos Draggable List Test

This is a test of creating a Drag and Drop capable list using Leptos web framework in Rust.

DragList takes a Vec<T> : Listable of items to list. The Listable trait just needs to implement get_id and get_name.

Signals are used:

• DragList contains the itemslist - and provides setters for 3 signals to subitems via provide_context.
• DragItem
  • Contains two internal signals for item state. is_dragging and is_hoverred_over. These drive the UI changes (adding classes to display hover & drag states).
  • Uses the 3 setters available from context to pass their item_id back to the DragList - and fire if a drop occurs.
    • JS Event.DataTransfer is used to provide an item_id and fire the drop event.

Testing the project

cargo leptos watch http://127.0.0.1:3000

Author's Note

This is my first rust and webassembly project. The code is free to copy and use but I have no idea how "rusty" it is. It is just a proof of concept/learning experience before I start a real project.

leptos-drag-drop-list's Issues

Build seems broken

Thank your for your contribution! I am new to leptos and wanted to try this project. But I can not build. I guess some API changed?

error[E0618]: expected function, found `ReadSignal<bool>`
  --> src/components/dark_mode_toggle.rs:20:16
   |
11 |     let (is_dark, set_is_dark) = create_signal(cx, prefer_dark);
   |          ------- `is_dark` has type `ReadSignal<bool>`
...
20 |             if is_dark() {
   |                ^^^^^^^--
   |                |
   |                call expression requires function

error[E0277]: the trait bound `(leptos::Scope, ReadSignal<bool>): leptos::IntoClass` is not satisfied
   --> src/components/drag_item.rs:79:5
    |
79  | /     view! {
80  | |         cx,
81  | |         <li
82  | |             class:dragging=is_dragging
    | |             ----- required by a bound introduced by this call
...   |
93  | |         </li>
94  | |     }
    | |_____^ the trait `leptos::IntoClass` is not implemented for `(leptos::Scope, ReadSignal<bool>)`
    |
    = help: the trait `leptos::IntoClass` is implemented for `(leptos::Scope, T)`

...