-
Notifications
You must be signed in to change notification settings - Fork 1k
docs: record out-of-scope feature requests from issue triage #824
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.
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
Merged
Merged
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # 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 | ||
| <Draggable | ||
| nodeRef={nodeRef} | ||
| onDrag={(e, data) => { | ||
| 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; | ||
| }} | ||
| > | ||
| <div ref={nodeRef}>Drag me</div> | ||
| </Draggable> | ||
| ``` | ||
| 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 | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| # Dragging outside the browser window | ||
|
|
||
| A draggable cannot leave the browser window. | ||
|
|
||
| ## Why this is out of scope | ||
|
|
||
| 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 | ||
|
|
||
| - [#688](https://github.com/react-grid-layout/react-draggable/issues/688) - Ability to drag outside browser window...? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: `<Draggable>` 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 | ||
|
|
||
| - [#320](https://github.com/react-grid-layout/react-draggable/issues/320) - Vuejs version? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| # Function-as-child / render-prop API | ||
|
|
||
| `<Draggable>` 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 `<DraggableCore>`: 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 |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.