What’s the bit you’re asking about specifically? A general strategy could be to markup your frontend form the same way ProcessWire does it in the admin (i.e. the names of the inputs) and let PW do the server-side work somewhat like this:
$yourImageField->processInput($input->post);
/* upload errors must be handled separately, but you only want
* to rearrange existing images, so you’ll probably want to
* reject submissions with new images somehow. */
if (count($yourImageField->getWireUpload()->getErrors())) {
$errors++;
$yourImageField->error('Upload failed, tough luck.');
}
if (count($yourImageField->getErrors())) {
$errors++;
} else {
// successful form submission, so populate the page with the new values.
$page->set($yourImageField->name, $yourImageField->value);
}
if ($errors === 0) $page->save();
You’ll notice that PW uses hashes to identify individual PageImages. It keeps track of the name of the image field and the image’s hash in the name of an input element that contains the image’s sort value:
<input type='number' name='sort_<?=$yourImageField->name?>_<?=$image->hash?>' other-stuff-such-as-value />
For your use case it will likely be cleaner to just have a form with one number input per image, named after the hash, and hand rolling the sever-side processing. In fact, it may be easier to identify images by file name. Not sure how PW gets from the hash to the image. Since you’re likely using JavaScript to rearrange the images anyway, you might even get rid of the input element alltogether and just build the POST parameters from the actual order in the DOM before submitting.