Pricing Blog

How to drag one element and drop another?

  • mesmoiron-1290243019131322451

    mesmoiron

    1 year ago

    Hello good morning,

    I have been building a simple form builder with Drag and Drop. I feel a bit stuck.

    I have made two elements. When dropping the example address element on the canvas, the above element here checkbox should be dropped instead and be visible. It is not absolutely necessary, but certain form builders do it that way.

    In the meantime I learned to delete elements from the DOM. Obviously when I move one element into another list, the actual Toddle page doesn´t alter. So, there is this ghostlike state that does all the work. It is not totally clear to me what I have to catch and later save to XANO backend, like the manipulation of the address and checkbox movement mentioned above.
    1290243019475386392-Screenshot_from_2024-09-30_11-12-52.png
  • lucasg-1290317560801136670

    Lucas G

    1 year ago

    For stuff like that you'll need to keep it all in variables so everything is updated real-time on the app.
  • Then handle updating the database on the side as the user makes changes
  • mesmoiron-1290641632471027784

    mesmoiron

    1 year ago

    😅thanks sounds complicated. Do I need to make a database form, that tracks all the states of the fields?
  • lucasg-1290686011889684501

    Lucas G

    1 year ago

    Not necessarily
  • Unless you need to do auto save type of thing
  • But you probably only need one json column for that