Comments (3)
Hi, @mayheadd. Do you mean you'd like to have a "handle" that is the only part that can be dragged to reorder? This is not currently possible, but I'm in the middle of a re-write (which has pivoted quite a lot), and so this feature should be available in the future.
I'd suggest finding another library for now if you require this ability.
from react-reorder.
Just for future readers, one might not need another library with either of the following workarounds:
-
Use the
disabled
prop to only enable the component after anonMouseDown
event on some drag handle icon occurred, assuming that also fires on touch. Next, disable it again inonReorder
(which only fires if reordering truly happened), and when somehow detecting the mouse outside of the icon.(Using both
onMouseEnter
andonTouchStart
along withonMouseLeave
andonTouchEnd
might be easier. But that needs proper testing on touch devices, and needs testing with blurring due to, e.g., moving the mouse away from the icon after first switching to a different window with they keyboard. Also, keyboard navigation needs to be tested. Note that changingdisabled
while already dragging has no effect, so one can safely move the pointer away from the icon while dragging.) -
Or: use something like
<MyGrandchild onMouseDown={e => e.stopPropagation()}>
on whatever parts of the child should not trigger reordering. (One can still useonClick
on the very same parts.)
from react-reorder.
Closing due to lack of response. I assume the above workaround is suitable.
from react-reorder.
Related Issues (20)
- Unable to make 3.0.0-alpha.7 work with react 16.9 HOT 5
- Less performant deeper in the dom? HOT 1
- Please add events on "drag start" and "drag end" HOT 3
- Can't disable auto scroll HOT 7
- Another complete re-write in TypeScript, with hooks, React 16-17 support, and more HOT 4
- can't reorder
- TypeError: this.state.draggedStyle is null HOT 2
- Update PropTypes HOT 1
- Warning: This synthetic event is reused for performance reasons. HOT 3
- placeholder class is not added when dragging input fields HOT 3
- Overriding sorting behavior HOT 10
- V3 Alpha Issues HOT 47
- Warning with react 15.5.0 HOT 12
- can't control dragged div HOT 17
- Images Reloading/Flashing HOT 9
- Error: Expected reorderId to be a string. Instead got undefined HOT 12
- Tidy up prop documentation in readme (v3) HOT 2
- Support React v16 HOT 11
- Issues with embedded images? HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-reorder.