Add drag-and-drop reordering for reference images

[Copilot]

Summary

Some models (e.g. Flux.2 klein in edit mode) are sensitive to the order reference images are presented during inference. This adds drag-and-drop reordering to the Reference Image list so users can control that order.

Redux

• Added refImagesReordered action to refImagesSlice — accepts an ordered ids: string[] and rebuilds state.entities in that order

DnD

• Added singleRefImageDndSource to dnd.ts — a dedicated source type for ref image reordering (ref images are not canvas entities, so they can't share singleCanvasEntityDndSource)

Hook

• New useRefImageListDnd.ts — mirrors useCanvasEntityListDnd but uses left/right edge detection for the horizontal layout

Component

• RefImageList: each preview is now wrapped in a RefImageListItem that attaches the DnD hook and renders a DndListDropIndicator (vertical drop line between items)
• A monitorForElements effect handles drops, calls reorderWithEdge with axis: 'horizontal', dispatches refImagesReordered, then flashes the moved item

Bug fix

• Added draggable={false} to the <img> element in RefImagePreview to prevent the browser's native image drag (e.g. drag-to-new-tab) from intercepting the drag gesture and blocking pragmatic-drag-and-drop from activating

Logging

• Added an info-level log statement (via the dnd logger namespace) after each reorder dispatch, emitting the new ordered list of ref image IDs so the reorder can be verified in the browser console

Related Issues / Discussions

QA Instructions

1. Open the Generate tab and add 2–5 reference images.
2. Drag a reference image to a new position — a vertical drop indicator should appear between items.
3. Release — the image should snap to its new position with a brief flash animation.
4. Verify the new order is reflected in inference (e.g. check the order images are sent to the backend).
5. To confirm ordering via logs: enable logging in InvokeAI settings with log level info and the dnd namespace, then drag to reorder — the console will show a Ref images reordered message with the updated reorderedIds array.

Merge Plan

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• ❗Changes to a redux slice have a corresponding migration
• Documentation added / updated (if applicable)
• Updated What's New copy (if doing a release after this PR)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[enhancement]: Add ability to reorder reference images</issue_title>
<issue_description>### Is there an existing issue for this?

• I have searched the existing issues

Contact Details

No response

What should this feature add?

This feature will allow the user to reorder the images in the Reference Image area by clicking and dragging them. When the order changes, the order in which the images are presented to the backend during rendering should also be changed.

This is useful because some models, such as Flux.2 klein in edit mode, are sensitive to the order in which reference images are presented.

Alternatives

No response

Additional Content

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [enhancement]: Add ability to reorder reference images #89

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[lstein]

In practice this does not seem to be working. I rebuilt the front end, reloaded the frontend on my browser (several times with the shift-key held down to force reload), added three images and then tried to reorder them by dragging.

The images dragged, but no vertical drop bar appeared and I couldn't reorder them. I think perhaps that the browser's drag-to-create-a-new-tab is interfering with the desired behavior?

[Copilot]

In practice this does not seem to be working. I rebuilt the front end, reloaded the frontend on my browser (several times with the shift-key held down to force reload), added three images and then tri...

The root cause was that the <img> element inside RefImagePreview has native browser drag behavior enabled by default. When dragging from the image, the browser intercepts it (showing the "drag image to new tab" ghost), preventing pragmatic-drag-and-drop from activating on the container.

Fixed in b100f23 by adding draggable={false} to the <img> in RefImagePreview.tsx. This suppresses the native image drag so pragmatic-drag-and-drop can take over. The drop indicator and reordering should now work correctly.

[lstein]

@copilot Please add a log statement to the code (at the info level) so that I can verify that the order of the images is changing as expected.

[Copilot]

@copilot Please add a log statement to the code (at the info level) so that I can verify that the order of the images is changing as expected.

Added in c59c814. After each reorder, the dnd logger now emits an info-level message with the new ordered list of IDs:

logger('dnd').info({ reorderedIds }, 'Ref images reordered')

To see it in the browser console, enable logging via the InvokeAI settings (set log level to info and include the dnd namespace), or set localStorage.setItem('ROARR_LOG', 'true') and localStorage.setItem('ROARR_FILTER', 'context.logLevel:>=30 AND context.namespace:dnd') directly in the console before testing.