How to rearrange the order of blocks of a single matrix field using a frontend form?

Question

I'm trying to rearrange the matrix block order using a frontend form.

• If I use JavaScript to change the order of inputs in the DOM will this change the order in the backend after form submission?
• How do you include the correct value for image fields, is this using the image id?

I have a reduced test case of what I came up with below, anyone see where I'm going wrong?

<form method="post" accept-charset="UTF-8" enctype="multipart/form-data">
   {{ getCsrfInput() }}
   <input type="hidden" name="action" value="entries/saveEntry">
   <input type="hidden" name="redirect" value="viewentry/{slug}">
   <input type="hidden" name="entryId" value="{{ entry.id }}">
   <input type="hidden" name="fields[galleryBlock]" />

   {% for block in entry.galleryBlock %}

       {% switch slide.type %}

       {% case 'landscape' %}
            {# block 1 #}
            {% set image = block.image[0] ?? null %}
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape]" value="{{ image.id }}">
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][enabled]" value="1">

        {% case 'portrait' %}
            {# block 2 #}
            {% set image = block.image[0] ?? null %}
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][portrait]" value="{{ image.id }}">
            <input type="hidden" name="fields[galleryBlock][{{ block.id }}][enabled]" value="1">

    {% endswitch %}

{% endfor %}

Answer 1

Your sort order will change according to your HTML, so when you change your html, the sort order will change. You can use certain Javascript libraries to move your containers in your DOM, when you save the entry, your related entries will change.

As for every relation field in Craft, you only have to insert an array of ids to relate the elements.

<input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape]" value="{{ image.id }}">

Is wrong because you insert the id of an image, not an array

<input type="hidden" name="fields[galleryBlock][{{ block.id }}][landscape][]" value="{{ image.id }}">

is the correct way