[QTI] Replace the reorder chevrons with drag and drop in the choice and ordering interaction editors

[AlexVelezLl]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Overview

Choices in the choice interaction editor and items in the ordering interaction editor are reordered with up and down chevron buttons in a toolbar at the end of each row. Kolibri already has a drag-and-drop reordering package that solves this, so bring it into Studio and use it in both editors: a drag handle at the start of each row replaces the chevrons.

Complexity: Medium
Target branch: unstable

Context

The source package is packages/kolibri-common/components/draggable in Kolibri. Its reorderable-list entry point is DragSortWidget/index.vue, which already provides keyboard move controls and live-region announcements, so replacing the chevrons does not remove keyboard reordering.

Studio already has a shared/views/draggable/ directory holding its own older drag-and-drop system, alongside shared/mixins/draggable/ and the draggablePlugin Vuex module. It is imported by StudioTree, the Clipboard, TreeView and ContentNodeListItem, and three of its filenames — DraggableHandle.vue, DraggableItem.vue, DraggableRegion.vue — are also filenames in the Kolibri package. The two cannot share a directory.

Adaptations the copied code needs:

• RTL. Kolibri resolves it inside DragSortWidget/index.vue via isRtl(currentLanguage) from kolibri/utils/i18n. Studio's shared/i18n exports the same two names and also exposes Vue.prototype.isRtl.
• kolibri/uiText/commonCoreStrings → shared/strings/commonStrings; kolibri/utils/i18n → shared/i18n; kolibri-logging → shared/logging.
• uuid and KDS useKLiveRegion are already available in Studio. sortablejs is not in package.json.

In the two editors, the toolbar at the end of each row is a CollapsibleToolbar carrying three actions: move up, move down, and delete.

The Change

Kolibri's draggable package should be copied into Studio as a new directory under shared/views/, shared/views/dragSort/, leaving the existing shared/views/draggable/ and its consumers alone. The copy should keep Kolibri's structure so future changes can be diffed against the source, with adaptations limited to what Studio requires — Studio's i18n, strings and logging modules in place of Kolibri's, and RTL resolved the way Studio resolves it.

Both the choice interaction editor and the ordering interaction editor should then reorder by drag and drop. Each row should carry a drag handle at its start, and the move up and move down chevrons should be gone. Delete should remain available on each row as its own icon button at the end, so CollapsibleToolbar is no longer used by either editor.

Reordering should stay usable by keyboard, using the controls the widget already provides, and should follow the reading direction in RTL languages.

How to Get There

Both editors are reachable from the QTI demo page rather than the exercise authoring flow: open a channel for editing and go to /channels/<channel_id>/#/qti-demo. Its fixture items already cover both editors — single-select and multi-select items use the choice interaction editor, and the planets item uses the ordering interaction editor. In each, the row's reorder controls are in the toolbar at the end of the row.

Out of Scope

• Migrating the existing consumers of shared/views/draggable/ — StudioTree, the Clipboard, TreeView and ContentNodeListItem keep using it.
• Removing shared/views/draggable/, shared/mixins/draggable/ or the draggablePlugin Vuex module.
• Removing CollapsibleToolbar. The QTI editor's item-level actions still use it.
• Sending any fixes made while porting back to Kolibri.

Acceptance Criteria

General

• Kolibri's draggable package is copied into a new directory under shared/views/, leaving shared/views/draggable/ and its consumers untouched
• The copy keeps Kolibri's file structure, so it can be diffed against the source
• Studio's i18n, strings and logging modules replace Kolibri's equivalents in the copied code
• sortablejs is added to package.json at the version Kolibri uses
• Choices in the choice interaction editor can be reordered by dragging
• Items in the ordering interaction editor can be reordered by dragging
• Each row has a drag handle at its start
• The move up and move down controls are gone from both editors
• Delete remains on each row as its own icon button at the end
• Neither editor uses CollapsibleToolbar
• Reordering produces the same XML output as the chevrons did

Accessibility and i18n

• Reordering is operable by keyboard, using the controls the widget provides
• Drag handles have accessible labels
• Reordering is announced to screen readers
• Drag direction and the widget's move controls follow the reading direction in RTL languages
• Strings that came with the copied package are registered through Studio's createTranslator

References

• Kolibri's draggable package — the source to copy, with DragSortWidget/index.vue as the reorderable-list entry point

AI usage

I used Claude Code to draft this issue. It read both interaction editors and Kolibri's draggable package to confirm what the port involves; I made the scoping decisions and reviewed every section.

[rtibblesbot]

Plan: Port Kolibri's draggable package into Studio as shared/views/dragSort/ and use it to replace the move-up/move-down chevrons in the QTI choice and ordering interaction editors with a drag handle.

• Copy the draggable package into shared/views/dragSort/
• Reorder-by-id on the two interaction composables
• ChoiceInteractionEditor — drag handle in, CollapsibleToolbar out
• OrderingInteractionEditor — drag handle in, CollapsibleToolbar out
• Verify the acceptance criteria on the QTI demo page
• Self-review the produced code

---

@rtibblesbot's comments are generated by an LLM, and should be evaluated accordingly

How was this generated?

• Implemented code following the pre-approved plan using test-driven development (red-green-refactor)
• Ran the project's full test suite and linter before committing
• For UI changes: captured live screenshots to verify rendering
• For backend changes: verified with example API/CLI output