Pricing Blog

How to bind array to drag & drop list to keep variable in sync with displayed list?

  • feraask-1324519926899408968

    KillerK009

    5 months ago

    Is there an easy way to bind an array variable to a scrollable list in the UI where the array variable updates if the user makes changes to the list?

    Basically, trying to create a weight lifting program builder which will have a horizontal scrolling list of days where the user can dynamically add/remove as many days as needed. And then each of those days has a vertically scrolling list of exercises that also can be dynamically added/removed and reordered (see photo for example of similar goal UI).

    I'd like it to be possible to drag and drop both the days and exercises between days.

    I see the Spark Drag and Drop and starter-pack packages have list components, but I'm not sure if the starter-pack allows drag & drop between different lists (to allow exercises to change days) and the Spark package seems like it would require manually updating the underlying array variable anytime the lists changed which would be kind-of a hassle to implement, especially since I'm still brand-new to Toddle.
    1324519927452926024-444167416_7992259844152415_7388758529921033287_n.png
  • lucasg-1324524722611818661

    Lucas G

    5 months ago

    I'll try to update the starter-pack
  • I've seen changed it to make a kanban style board which is what this is
  • lucasg-1324525096249069619

    Lucas G

    5 months ago

    No timeline for it though as I'm not available for the next few weeks 😅
  • feraask-1324537835004625041

    KillerK009

    5 months ago

    That'd be great!!

    Also, does the starter-pack drag-and-drop component only display a single text line for each item in the list? Is there a way to define a custom UI for each list item?
  • lucasg-1324538521628840047

    Lucas G

    5 months ago

    If you copy the component into your project you can tweak it
  • I'll add a slot in so people can add whatever they want
    🙏1
  • max.kayr-1324615361848541227

    Max

    5 months ago

    Hey! With the Spark DnD package, you need to update your array manually. That package supports all kinds of lists and flexibility was the main goal. That is why you need to do this yourself. In the package docs, there is a video on that topic