Comfy-Org / Comfy-Org/ComfyUI_frontend

DraggableList.ts — 336-line vanilla JS drag-and-drop in Vue codebase

Open
#11,105 0 comments 0 reactions 1 assignee Claimed by @kaili-yang View on GitHub
area:vue-migration audit:vestigial code-audit developer experience
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.