Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 33 additions & 0 deletions .out-of-scope/auto-scroll.md
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>
```
Comment thread
coderabbitai[bot] marked this conversation as resolved.
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
11 changes: 11 additions & 0 deletions .out-of-scope/click-to-move.md
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
31 changes: 31 additions & 0 deletions .out-of-scope/drag-and-drop.md
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?
11 changes: 11 additions & 0 deletions .out-of-scope/drag-outside-window.md
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...?
11 changes: 11 additions & 0 deletions .out-of-scope/framework-ports.md
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?
11 changes: 11 additions & 0 deletions .out-of-scope/function-as-child.md
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
Loading