Comfy-Org / Comfy-Org/ComfyUI_frontend
DraggableList.ts — 336-line vanilla JS drag-and-drop in Vue codebase
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 702
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 512
Description
## Problem
`src/scripts/ui/draggableList.ts` is a 336-line vanilla JavaScript drag-and-drop implementation using raw DOM manipulation (`mousedown`, `mousemove`, manual DOM reordering). This exists in a Vue 3 codebase that already has:
- `src/composables/usePragmaticDragAndDrop.ts` (Vue wrapper around pragmatic-dnd)
- VueUse's drag utilities
- Native HTML5 drag-and-drop
### Current consumers
- `src/extensions/core/groupNodeManage.ts` — legacy dialog for managing group node inputs
- `src/scripts/ui/menu/index.ts` — re-exported for extension compat
- `src/components/rightSidePanel/parameters/TabSubgraphInputs.vue` — **active Vue component** using the vanilla JS class
### Impact
- The `TabSubgraphInputs.vue` consumer creates the `DraggableList` imperatively via `new DraggableList(element, 'li')`, mixing imperative DOM manipulation with Vue's reactive rendering
- 336 lines of DOM manipulation code that duplicates capability already available via pragmatic-dnd
### Suggested fix
1. Replace `TabSubgraphInputs.vue`'s usage with pragmatic-dnd (or VueUse drag)
2. Keep the re-export in `scripts/ui/menu/index.ts` for extension compat if needed
3. Mark `DraggableList` as deprecated
### Files involved
- `src/scripts/ui/draggableList.ts`
- `src/components/rightSidePanel/parameters/TabSubgraphInputs.vue`
- `src/extensions/core/groupNodeManage.ts`
- `src/scripts/ui/menu/index.ts`
Parent: #11022
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-11105-DraggableList-ts-336-line-vanilla-JS-drag-and-drop-in-Vue-codebase-33e6d73d36508159bbddef4d3e46885d) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.