Skip to content

feat(common): add a source/zone drag abstraction on sortablejs #15086

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
habibayman wants to merge 10 commits into
base: develop
Choose a base branch
from
Open

feat(common): add a source/zone drag abstraction on sortablejs #15086

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
41797e9
feat(draggable): scaffold the draggable component dir
habibayman Jul 24, 2026
23655b5
feat(draggable): create the universe component and composable
habibayman Jul 24, 2026
e7a35c1
feat(draggable): create the region component and composable
habibayman Jul 24, 2026
c365292
feat(draggable): add draggable handle and item components
habibayman Jul 24, 2026
ce49b4a
feat(draggable): migrate qti order interaction to draggable
habibayman Jul 24, 2026
cbf0d90
feat(draggable): migrate questions accordion to draggable
habibayman Jul 24, 2026
b7cef7a
feat(draggable): migrate section order to draggable
habibayman Jul 24, 2026
8b64ce5
feat(draggable): migrate learner resource table to draggable
habibayman Jul 24, 2026
ff845d5
feat(draggable): migrate rearrange channels page to draggable
habibayman Jul 24, 2026
980253f
refactor: delete sortable component in favor of the new draggable
habibayman Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 97 additions & 97 deletions kolibri/plugins/coach/frontend/views/common/QuestionsAccordion.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,102 +34,98 @@
</div>
</template>

<DragContainer
<DraggableRegion
key="drag-container"

@rtibblesbot rtibblesbot Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nitpick: Stale name — this is a DraggableRegion now. It's a static key on a non-v-for, non-v-if element, so dropping it entirely works too.

:items="questions"
@sort="handleQuestionOrderChange"
@dragStart="handleDragStart"
@update:items="handleQuestionOrderChange"
@dragstart="handleDragStart"
@dragend="handleDragEnd"
>
<transition-group
tag="div"
name="list"
<DraggableItem
v-for="(question, index) in questions"
:key="`drag-${question.item}`"
tabindex="-1"
:style="{
background: $themeTokens.surface,
}"
>
<Draggable
v-for="(question, index) in questions"
:key="`drag-${question.item}`"
tabindex="-1"
:style="{
background: $themeTokens.surface,
<AccordionItem
:title="getDisplayQuestionTitle(question, getQuestionContent(question)?.title)"
:disabledTitle="questionItemsToReplace?.includes(question.item)"
:aria-selected="questionIsChecked(question)"
:headerAppearanceOverrides="{
userSelect: dragActive ? 'none !important' : 'text',
}"
>
<AccordionItem
:title="getDisplayQuestionTitle(question, getQuestionContent(question)?.title)"
:disabledTitle="questionItemsToReplace?.includes(question.item)"
:aria-selected="questionIsChecked(question)"
:headerAppearanceOverrides="{
userSelect: dragActive ? 'none !important' : 'text',
}"
>
<template #leading-actions>
<DragHandle v-if="isSortable">
<div>
<DragSortWidget
:isFirst="index === 0"
:isLast="index === questions.length - 1"
:itemLabel="
getDisplayQuestionTitle(question, getQuestionContent(question)?.title)
"
:position="index + 1"
:total="questions.length"
@moveUp="() => handleKeyboardDragUp(index)"
@moveDown="() => handleKeyboardDragDown(index)"
/>
</div>
</DragHandle>
<KCheckbox
v-if="isSelectable"
class="accordion-item-checkbox"
:checked="questionIsChecked(question)"
:disabled="questionCheckboxDisabled(question)"
@change="
(value, $event) => handleQuestionCheckboxChange(question.item, value, $event)
"
<template #leading-actions>
<DraggableHandle v-if="isSortable">
<div>
<DragSortWidget
:isFirst="index === 0"
:isLast="index === questions.length - 1"
:itemLabel="
getDisplayQuestionTitle(question, getQuestionContent(question)?.title)
"
:position="index + 1"
:total="questions.length"
@moveUp="() => handleKeyboardDragUp(index)"
@moveDown="() => handleKeyboardDragDown(index)"
/>
</div>
</DraggableHandle>
<KCheckbox
v-if="isSelectable"
class="accordion-item-checkbox"
:checked="questionIsChecked(question)"
:disabled="questionCheckboxDisabled(question)"
@change="
(value, $event) => handleQuestionCheckboxChange(question.item, value, $event)
"
/>
</template>
<template #trailing-actions>
<span v-if="questionItemsToReplace?.includes(question.item)">
{{ replacingThisQuestionLabel$() }}
</span>
<slot
name="question-trailing-actions"
:question="question"
></slot>
</template>
<template #content>
<div
:id="`question-panel-${question.item}`"
:style="{ userSelect: dragActive ? 'none !important' : 'text' }"
>
<ContentViewer
v-if="questionContentExists(question)"
:ref="`contentRenderer-${question.item}`"
:contentNode="getQuestionContent(question)"
:itemId="question.question_id"
:allowHints="false"
:interactive="false"
:showCorrectAnswer="true"
@interaction="() => null"
@updateProgress="() => null"
@updateContentState="() => null"
@error="err => $emit('error', err)"
/>
</template>
<template #trailing-actions>
<span v-if="questionItemsToReplace?.includes(question.item)">
{{ replacingThisQuestionLabel$() }}
</span>
<div v-else>
<KIcon
icon="warning"
:style="{ fill: $themePalette.yellow.v_600 }"
/>
{{ coreString('resourceNotFoundOnDevice') }}
</div>
<slot
name="question-trailing-actions"
name="questionExtraContent"
:question="question"
></slot>
</template>
<template #content>
<div
:id="`question-panel-${question.item}`"
:style="{ userSelect: dragActive ? 'none !important' : 'text' }"
>
<ContentViewer
v-if="questionContentExists(question)"
:ref="`contentRenderer-${question.item}`"
:contentNode="getQuestionContent(question)"
:itemId="question.question_id"
:allowHints="false"
:interactive="false"
:showCorrectAnswer="true"
@interaction="() => null"
@updateProgress="() => null"
@updateContentState="() => null"
@error="err => $emit('error', err)"
/>
<div v-else>
<KIcon
icon="warning"
:style="{ fill: $themePalette.yellow.v_600 }"
/>
{{ coreString('resourceNotFoundOnDevice') }}
</div>
<slot
name="questionExtraContent"
:question="question"
></slot>
</div>
</template>
</AccordionItem>
</Draggable>
</transition-group>
</DragContainer>
</div>
</template>
</AccordionItem>
</DraggableItem>
</DraggableRegion>
</AccordionContainer>

</template>
Expand All @@ -139,10 +135,10 @@

import { computed, ref } from 'vue';
import { enhancedQuizManagementStrings } from 'kolibri-common/strings/enhancedQuizManagementStrings';
import Draggable from 'kolibri-common/components/sortable/Draggable';
import DragHandle from 'kolibri-common/components/sortable/DragHandle';
import DragContainer from 'kolibri-common/components/sortable/DragContainer';
import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
import DraggableItem from 'kolibri-common/components/draggable/DraggableItem';
import DraggableHandle from 'kolibri-common/components/draggable/DraggableHandle';
import DraggableRegion from 'kolibri-common/components/draggable/DraggableRegion';
import DragSortWidget from 'kolibri-common/components/draggable/DragSortWidget';
import AccordionItem from 'kolibri-common/components/accordion/AccordionItem';
import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
import AccordionContainer from 'kolibri-common/components/accordion/AccordionContainer';
Expand All @@ -151,9 +147,9 @@
export default {
name: 'QuestionsAccordion',
components: {
Draggable,
DragHandle,
DragContainer,
DraggableItem,
DraggableHandle,
DraggableRegion,
DragSortWidget,
AccordionItem,
AccordionContainer,
Expand Down Expand Up @@ -319,17 +315,21 @@
// Used to mitigate the issue of text being selected while dragging
this.dragActive = true;
},
handleQuestionOrderChange({ newArray }) {
this.$emit('sort', { newArray });
handleDragEnd() {

@rtibblesbot rtibblesbot Jul 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Resolved — addressed in the current code.

praise: Splitting this out of the sort handler fixes a real bug — QA confirms user-select on the accordion headers goes text → none → text across a drag that reorders nothing, where on develop it stayed none until the next successful sort.

// Reset on drag end (not only on a reorder) so a drag that changes nothing
// still re-enables text selection.
this.dragActive = false;
},
handleQuestionOrderChange(newArray) {
this.$emit('sort', { newArray });
},
handleKeyboardDragDown(oldIndex) {
const newArray = this.moveDownOne(oldIndex, this.questions);
this.handleQuestionOrderChange({ newArray });
this.handleQuestionOrderChange(newArray);
},
handleKeyboardDragUp(oldIndex) {
const newArray = this.moveUpOne(oldIndex, this.questions);
this.handleQuestionOrderChange({ newArray });
this.handleQuestionOrderChange(newArray);
},
handleQuestionCheckboxChange(questionItem, value, $event) {
$event.stopPropagation();
Expand Down
Loading
Loading