Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Re-order Form Repeater


Hi! I would like to know if there is any way or any similar component to Form Repeater where besides having the possibility to add/remove items from the list, I could also re order them by drag and dropping them. I' m using Metronic 8 HTML.

Thanks!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (11)


Visit IFrame Generator to create custom embeds effortlessly.



LinkedIn Text Formatter is a handy tool to quickly format text for LinkedIn posts.

Visit Keyboard Counter to track your typing activity in real-time.



Explore Timeday for accurate date and time calculators, converters, and tools to manage your time-related data efficiently.



Discover CorruptBox, your go-to platform for data manipulation and file corruption. Explore file glitches with ease and experience innovation with Sprunki!



The integration of drag-and-drop with form repeaters is an interesting challenge. On my development blog PinZhangHao, I've explored similar UI interactions. SortableJS seems like a solid solution here, though combining it with the form repeater's dynamic nature requires careful implementation. The show/hide callback API approach mentioned could be particularly useful for maintaining data consistency during reordering.



You can consider using SortableJS. Block Blast using it.



This is a lightweight, standalone library that allows drag-and-drop sorting of list items. It's easy to integrate with Metronic and works well with Form Repeater. You can initialize Sortable.js on the block blast's list after the Form Iterator displays the items.



Ok, I see. I believe what is need is a mix of Draggable and Form repeater. Since I need the number of input groups to be dynamically incremented like in Form Repeater, but also the ability to order them. What do you think is the best way to achieve it?



Hi,

You can consider using show/hide callback API https://github.com/DubFriend/jquery.repeater and integrate the Draggable object.

Regards.



Hi,

The formrepeater plugin does not have built in support for dragging functionality.
You can consider using DrDraggable plugin.

Regards


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(