From b1a97108c101041fb5eb0bd762b45d5fe31cc08e Mon Sep 17 00:00:00 2001 From: Samuel Reed Date: Sun, 27 Sep 2026 10:07:45 -0400 Subject: [PATCH 1/3] docs: record out-of-scope feature requests from issue triage Add .out-of-scope/ with one file per rejected concept (auto-scroll, drag-and-drop features, framework ports, function-as-child, click-to-move, dragging outside the window). Each file says why the library won't do it, shows the userland route, and lists the issues that asked. Triage close comments link here, so a new request for the same thing gets the same answer. --- .out-of-scope/auto-scroll.md | 31 ++++++++++++++++++++++++++++ .out-of-scope/click-to-move.md | 11 ++++++++++ .out-of-scope/drag-and-drop.md | 31 ++++++++++++++++++++++++++++ .out-of-scope/drag-outside-window.md | 11 ++++++++++ .out-of-scope/framework-ports.md | 11 ++++++++++ .out-of-scope/function-as-child.md | 11 ++++++++++ 6 files changed, 106 insertions(+) create mode 100644 .out-of-scope/auto-scroll.md create mode 100644 .out-of-scope/click-to-move.md create mode 100644 .out-of-scope/drag-and-drop.md create mode 100644 .out-of-scope/drag-outside-window.md create mode 100644 .out-of-scope/framework-ports.md create mode 100644 .out-of-scope/function-as-child.md diff --git a/.out-of-scope/auto-scroll.md b/.out-of-scope/auto-scroll.md new file mode 100644 index 00000000..762af9f9 --- /dev/null +++ b/.out-of-scope/auto-scroll.md @@ -0,0 +1,31 @@ +# Auto-scroll while dragging + +react-draggable does not scroll a container or the window when a drag nears its edge. + +## Why this is out of scope + +Auto-scroll needs decisions that belong to the app: which ancestor scrolls, how big the edge zone is, how speed ramps up, and whether `bounds` grows as the content scrolls. Each answer changes with the layout. A fixed default would be wrong for most callers, and a prop covering all of them would be larger than the rest of the library. + +It can be built outside the library. Scroll from `onDrag` and let the drag continue: + +```jsx + { + const box = scrollerRef.current.getBoundingClientRect(); + const y = e.clientY ?? e.touches?.[0]?.clientY; + if (y > box.bottom - 40) scrollerRef.current.scrollTop += 10; + else if (y < box.top + 40) scrollerRef.current.scrollTop -= 10; + }} +> +``` + +If you need scroll-aware drag and drop with sortable containers, use a full drag-and-drop library (dnd-kit, react-dnd). + +## Prior requests + +- [#151](https://github.com/react-grid-layout/react-draggable/issues/151) - window scrolling on drag up or down causes cursor to lose its place +- [#240](https://github.com/react-grid-layout/react-draggable/issues/240) - Dragging an item does not scroll the container +- [#492](https://github.com/react-grid-layout/react-draggable/issues/492) - Issue when drag and scroll using touch events +- [#767](https://github.com/react-grid-layout/react-draggable/issues/767) - Drag and scroll is very rough and drag item flickers +- [#776](https://github.com/react-grid-layout/react-draggable/issues/776) - Scroll when dragging diff --git a/.out-of-scope/click-to-move.md b/.out-of-scope/click-to-move.md new file mode 100644 index 00000000..0eea49c4 --- /dev/null +++ b/.out-of-scope/click-to-move.md @@ -0,0 +1,11 @@ +# Click-to-pick-up, click-to-drop + +react-draggable drags between mousedown/touchstart and mouseup/touchend. It has no mode where one click picks the element up and a second click drops it. + +## Why this is out of scope + +A sticky pick-up mode changes the whole event model: focus, Escape to cancel, what a click on another element means, and accessibility. That's a different interaction, not a drag option. Build it with a pointer-move listener that updates controlled `position` while your own "picked up" state is true. + +## Prior requests + +- [#499](https://github.com/react-grid-layout/react-draggable/issues/499) - Allows dragging elements without having to hold the mouse diff --git a/.out-of-scope/drag-and-drop.md b/.out-of-scope/drag-and-drop.md new file mode 100644 index 00000000..b251e770 --- /dev/null +++ b/.out-of-scope/drag-and-drop.md @@ -0,0 +1,31 @@ +# Drag-and-drop features + +react-draggable moves one element. It has no drop targets, sortable lists, drag-to-copy, collision handling, or multi-element selection. + +## Why this is out of scope + +The library is a drag primitive. It turns pointer events into a position and applies it as a `transform`. Every feature below needs state that spans several elements: a registry of drop zones and hit tests, a list order, a selection set, or a collision model. That state belongs to the app or to a drag-and-drop library built for it. + +| You want | Build it with | +|---|---| +| Drop zones, "is it over X?" | `onStop` + `getBoundingClientRect()` on your targets, or dnd-kit / react-dnd | +| Sortable lists | dnd-kit sortable | +| Drop a copy, keep the original | Render a new item in `onStop`, and reset the original via controlled `position` | +| Move several elements together | Controlled `position` on each, updated from one `onDrag` | +| Revert on overlap | Check overlap in `onStop`, and set `position` back | +| Grid dashboards | react-grid-layout | + +## Prior requests + +- [#308](https://github.com/react-grid-layout/react-draggable/issues/308) - Dragging multiple connected components? +- [#355](https://github.com/react-grid-layout/react-draggable/issues/355) - How to drag from a toolbox and make new created components draggable +- [#415](https://github.com/react-grid-layout/react-draggable/issues/415) - How to move Draggable to a div and it can only be dropped within that? +- [#474](https://github.com/react-grid-layout/react-draggable/issues/474) - Drag multiple objects at once +- [#496](https://github.com/react-grid-layout/react-draggable/issues/496) - Drag elements and reposition overlaid elements +- [#519](https://github.com/react-grid-layout/react-draggable/issues/519) - While Left mouse drag the drop-targets do not recognize it +- [#539](https://github.com/react-grid-layout/react-draggable/issues/539) - Is it possible to somehow detect whether a Draggable has been dropped +- [#593](https://github.com/react-grid-layout/react-draggable/issues/593) - How to copy on drag and drop it? +- [#628](https://github.com/react-grid-layout/react-draggable/issues/628) - Drag and drop a copy of component +- [#697](https://github.com/react-grid-layout/react-draggable/issues/697) - how to place draggable at the first location and drop a copy of it? +- [#703](https://github.com/react-grid-layout/react-draggable/issues/703) - Using React Draggable for dragging list items +- [#724](https://github.com/react-grid-layout/react-draggable/issues/724) - how to cancel the move when draggable elements overlap each other? diff --git a/.out-of-scope/drag-outside-window.md b/.out-of-scope/drag-outside-window.md new file mode 100644 index 00000000..f4145028 --- /dev/null +++ b/.out-of-scope/drag-outside-window.md @@ -0,0 +1,11 @@ +# Dragging outside the browser window + +A draggable cannot leave the browser window. + +## Why this is out of scope + +A DOM element can only render inside its document's viewport. Moving content between windows or to the desktop needs the HTML Drag and Drop API (`dataTransfer`) or a native shell such as Electron. Both are outside what a transform-based drag component can do. + +## Prior requests + +- [#688](https://github.com/react-grid-layout/react-draggable/issues/688) - Ability to drag outside browser window...? diff --git a/.out-of-scope/framework-ports.md b/.out-of-scope/framework-ports.md new file mode 100644 index 00000000..92f72994 --- /dev/null +++ b/.out-of-scope/framework-ports.md @@ -0,0 +1,11 @@ +# Ports to other frameworks + +react-draggable is React-only. There is no Vue, Svelte, or vanilla build. + +## Why this is out of scope + +The component model is the library: `` clones its React child and sets props on it, and callbacks run through React state. A port would be a separate library with its own maintainers. For Vue, look at vue-draggable-resizable. For framework-free dragging, look at interact.js. + +## Prior requests + +- [#320](https://github.com/react-grid-layout/react-draggable/issues/320) - Vuejs version? diff --git a/.out-of-scope/function-as-child.md b/.out-of-scope/function-as-child.md new file mode 100644 index 00000000..a66d8e75 --- /dev/null +++ b/.out-of-scope/function-as-child.md @@ -0,0 +1,11 @@ +# Function-as-child / render-prop API + +`` takes one element child. It does not accept a function child that receives the position. + +## Why this is out of scope + +The two reasons for the request both have answers now. Reading the position is `onDrag`/`onStop` data, or controlled `position`. Pointing at the DOM node without `findDOMNode` is `nodeRef`. If you need full control over rendering, use ``: it applies no transform and hands you the deltas. + +## Prior requests + +- [#414](https://github.com/react-grid-layout/react-draggable/issues/414) - Accept function as child or pass raw position From fbc1a2a1a8806569fa2f04714514d6de38a5c236 Mon Sep 17 00:00:00 2001 From: Samuel Reed Date: Sun, 27 Sep 2026 10:13:16 -0400 Subject: [PATCH 2/3] docs: fix two out-of-scope doc errors from review auto-scroll.md: the JSX example stopped after the opening tag, so it did not parse. Add the child and the closing tag. drag-outside-window.md: it said an element can only render inside the viewport. A draggable can move past the viewport edge unless bounds stops it. What it can't do is leave its window. Swept all six files: auto-scroll.md has the only code example, and only drag-outside-window.md makes a viewport claim. --- .out-of-scope/auto-scroll.md | 2 ++ .out-of-scope/drag-outside-window.md | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.out-of-scope/auto-scroll.md b/.out-of-scope/auto-scroll.md index 762af9f9..a67c085e 100644 --- a/.out-of-scope/auto-scroll.md +++ b/.out-of-scope/auto-scroll.md @@ -18,6 +18,8 @@ It can be built outside the library. Scroll from `onDrag` and let the drag conti else if (y < box.top + 40) scrollerRef.current.scrollTop -= 10; }} > +
Drag me
+ ``` If you need scroll-aware drag and drop with sortable containers, use a full drag-and-drop library (dnd-kit, react-dnd). diff --git a/.out-of-scope/drag-outside-window.md b/.out-of-scope/drag-outside-window.md index f4145028..ae3a7a1c 100644 --- a/.out-of-scope/drag-outside-window.md +++ b/.out-of-scope/drag-outside-window.md @@ -4,7 +4,7 @@ A draggable cannot leave the browser window. ## Why this is out of scope -A DOM element can only render inside its document's viewport. Moving content between windows or to the desktop needs the HTML Drag and Drop API (`dataTransfer`) or a native shell such as Electron. Both are outside what a transform-based drag component can do. +A draggable can move past the edge of the viewport (unless `bounds` stops it), but it stays inside its own document and window. Moving content between windows or to the desktop needs the HTML Drag and Drop API (`dataTransfer`) or a native shell such as Electron. Both are outside what a transform-based drag component can do. ## Prior requests From aeef2b1461be56f31493e8faf685b6608223ac7c Mon Sep 17 00:00:00 2001 From: Samuel Reed Date: Sun, 27 Sep 2026 10:26:25 -0400 Subject: [PATCH 3/3] docs: correct how Draggable callbacks run in framework-ports.md It said callbacks run through React state. They don't: DraggableCore calls onStart/onDrag from its native event handlers, and Draggable calls user callbacks before its own setState. The React tie is the cloned child and the position kept in component state. Swept .out-of-scope/ for other 'React state' claims: 1 site, this one. --- .out-of-scope/framework-ports.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.out-of-scope/framework-ports.md b/.out-of-scope/framework-ports.md index 92f72994..5a152518 100644 --- a/.out-of-scope/framework-ports.md +++ b/.out-of-scope/framework-ports.md @@ -4,7 +4,7 @@ react-draggable is React-only. There is no Vue, Svelte, or vanilla build. ## Why this is out of scope -The component model is the library: `` clones its React child and sets props on it, and callbacks run through React state. A port would be a separate library with its own maintainers. For Vue, look at vue-draggable-resizable. For framework-free dragging, look at interact.js. +The component model is the library: `` clones its React child, sets props on it, and keeps the position in React component state. A port would be a separate library with its own maintainers. For Vue, look at vue-draggable-resizable. For framework-free dragging, look at interact.js. ## Prior requests