Comments (5)
That's not how that prop is supposed to work. By default the noDragClassName is "nodrag". That means if you add "nodrag" to an element, the built-in drag handler wouldn't apply. You can change that by setting another class name via noDragClassName
.
If you want to make an element inside a node not draggable, you could add the class name "nodrag" to that element. If it's the node itself, you can set node.draggable
. Does that work for you?
from xyflow.
@moklick For my scenario, I need to be able to make lb-composer-editor > p
and nodrag
both work. This is because I'm using a third party component and it's dynamic, so I don't have a easy way to add nodrag
to those components. I was hoping noDragClassName
can support comma separate string with multiple classes in this line https://github.com/xyflow/xyflow/blob/main/packages/system/src/xydrag/XYDrag.ts#L333-L338
from xyflow.
Could you solve it with CSS?
.lb-composer-editor > p {
pointer-events: none;
}
from xyflow.
@moklick That didn't work, but I solved it with noDragClassName="nodrag, .lb-composer-editor > p"
.
TIL Your matches(selector)
function will match either of the classes. matches works like CSS selectors, so the comma means either, like how div, p { color: red; }
would work in CSS.
Thanks for your help!
from xyflow.
Interesting! Thanks for sharing your solution.
from xyflow.
Related Issues (20)
- Background pattern id ends with undefined HOT 2
- "center" in PanelPosition is not completely centered
- Allow Multi-Selecting Nodes to Form SelectionBoxRect HOT 1
- Clicking a node doesn't select the node HOT 3
- [v12] Position absolute never displayed onNodeChanges HOT 8
- Error if parent node is after child node in the list of nodes HOT 2
- [V12] Missing types export: XYResizerParams and ResizeDragEvent HOT 2
- Selected nodes do not move when dragged after selecting with `Shift+Click` or programaticaly. HOT 1
- load remote custom node HOT 2
- getNodesBounds returns wrong values for nodes in subflow HOT 1
- Reactflow: Problem when use mui Menu as node context menu HOT 2
- TypeScript Error - Node.internals doesn't exist in the type export HOT 1
- setNodes from useReactFlow crashes as parent node cannot be found HOT 1
- Support non CSS-transform based rendering to allow the use of anchor positioning
- Error when clicking edge source end with onReconnect HOT 5
- NodeResizer lineStyle boderStyle invalid HOT 5
- Documentation website UX issue HOT 3
- [Typescript] useStore hook doesn't respect ReactFlowState generic HOT 2
- How can i prevent or stop the mouse event when i render the three.js model in reactflow HOT 9
- Floating Edges Example have some issue HOT 1
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 xyflow.