Drag & drop to reorder list items? Randomize list items?

[daotw]

Does Interactivity API enable users to drag & drop list items in a list?

Use case

The "ranking question" in a survey plugin.
Example 1
Example 2

There will also be situation where the answer choices (list items) need to be randomized.

After list items are reordered and survey form submitted, the data should be saved into database. I guess I'll use plain JS to save "state" or "context" (if there are multiple forms in a page) into database?

[daotw]

I searched the web and found nothing in terms of saving Interactivity-API-related data in the database. In API's documentation, I think there should be at least a few sentences providing directions or keywords regarding database.

[luisherranz]

Yes. Using either WP AJAX or the REST API is recommended and we should add examples about how to use both to the documentation 🙂

[daotw]

Thanks @luisherranz . Regarding randomizing list items on page load, does it have to do with data-wp-each?
I always try to google before asking you, but currently all I see is "shuffle array" related (JS and PHP). Google isn't helpful maybe because Interactivity API is too new.

[luisherranz]

Yes, data-wp-each can help randomize a list of items 🙂

[daotw]

@luisherranz looking forward to the mentioning of database in doc, particularly using apiFetch.

Also what's IAPI's role in block theme development? Just curious, this one is of low priority for me.

[daotw]

Documentation should include Block attributes (not to be confused with data-wp- HTML attributes) examples, since

1. Block attributes set a block's behavior and content.
2. Dynamic blocks live off block attributes.

[luisherranz]

Does Interactivity API enable users to drag & drop list items in a list?

There's nothing specific, but you should be able to use the HTML Drag and Drop API with directives, like data-wp-on--drag and such.