diff --git a/.out-of-scope/auto-scroll.md b/.out-of-scope/auto-scroll.md new file mode 100644 index 00000000..a67c085e --- /dev/null +++ b/.out-of-scope/auto-scroll.md @@ -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 + { + 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; + }} +> +
Drag me
+
+``` + +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..ae3a7a1c --- /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 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...? diff --git a/.out-of-scope/framework-ports.md b/.out-of-scope/framework-ports.md new file mode 100644 index 00000000..5a152518 --- /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, 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? 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