Dragging rectangles impossible? (tried to build a timeline component)
Hey, I wanted to build a timeline component where you could drag divs left and right with your mouse. It would be stored in a state and the rectangles would be rendered using
For. However, it seems like something like that is impossible. At first, I tried to set the state like in react by basically taking the object that defines the dragged box, making a copy of it by spreading its contents, setting the new values, and assigning it back to the array in a map function that would replace the original object by index. That resulted in the rectangle component being unmounted immediately. So I tried preserving the references. That kind of worked but it does not re-render the list during the changes but only after the rectangle component changes its dragged state to false.
Please, look at this example. Try dragging the rectangles and see what I mean.
https://playground.solidjs.com/anonymous/2e4da24a-a2bd-4f87-abc4-5553d3f288af
How should I approach this properly to make things re-render while dragging?Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
4 Replies
you can use stores for fine-grained reactivity
https://playground.solidjs.com/anonymous/bb87914e-91cf-41de-b79e-441096e0e369
https://www.solidjs.com/tutorial/stores_nested_reactivity
Wow thank you, that was simpler than I thought. I am now a little confused about when should I use signals. Are signals supposed to be used for primitive values like numbers, strings, and booleans and not things like arrays or objects? I mean like you always want your UI to react to any state changes and if signals can't do that, why should I use them?
kindly take the time to read this up and continue to next tutorial
This might be useful: https://solid-dnd.com/?example=Sortable%2520list%2520%28horizontal%29
Solid Drag & Drop
A lightweight, performant, extensible drag and drop toolkit for Solid.