Comments (16)
Just found this thread looking for an example of using the equivalent of DataTrasnfer.setDragImage()
. Links in the thread seem to be broken, so I'll put here the relevant updated links.
And using hooks:
from react-dnd.
I'm not 100% sure I understand your question.
Do you want to:
- Use custom drag image instead of default (by default, drag source is screenshotted)
- Change appearance of drag source and/or drop target while dragging occurs
- Use custom drag preview and change something in it in the middle of a drag operation
?
Do any of the examples help?
from react-dnd.
In my case, when I drag a component or node. The drag over and drag component have same styles. I must use something like this :
var node = _.extend({}, this.getDOMNode());
document.body.appendChild(node);
e.dataTransfer.setDragImage(node, e.clientX/2, this.getDOMNode().offsetHeight/2);
to show the dragging component. And set the drag over with opacity = 0 like you. But got the problem with react id.
In your code you set dataTransfer for dragPreview. But I do not know how to get it?
from react-dnd.
I still don't understand what you're trying to do. Maybe some screenshots would help?
from react-dnd.
I want to use custom drag preview (with custom style). And I want to know how to get dragpreview in your code. I read code and in the function beginDrag() I do not see where the dragpreview in it.
from react-dnd.
Do you want to hide the drag source while item is being dragged? You don't need dragPreview
for that, just set opacity to 0 (or return null from render) when this.getDragState(TYPE).isDragging
is true
.
See this example (tick "Hide source whole dragging" checkbox): http://gaearon.github.io/react-dnd/#/drag-around-naive
Source: https://github.com/gaearon/react-dnd/blob/master/examples/_drag-around-naive/Box.js#L42
Does this help?
from react-dnd.
Thank you @gaearon. I'm writing sortable list. And I want when I drag the item we can change the style of dragging item (and also hide the drag source). For example when we drag the box in the example. We may change the border color to red.
from react-dnd.
I see now. Sadly it's not easily possible due to how browser D&D API works but it's something I was experimenting with in this branch. See this example (not in master).
I haven't had time to complete this, but I may be able to do so during next few weeks if it's a priority to you. Let me know if this matches what you're looking for.
Seems like a duplicate of #17.
from react-dnd.
Thank @gaearon so much. I will see your experiment and learn from it. It is exactly what I am looking for.
from react-dnd.
Closing this for now, as this pretty much repeats #17.
Let me know if you come up with something!
from react-dnd.
This is available in 0.8.0 using DragLayerMixin
.
from react-dnd.
thanks @gaearon. It works well. Just problem with performance when the drag component is complicated.
from react-dnd.
Just problem with performance when the drag component is complicated.
You should use PureRenderMixin
(or manually implement shouldComponentUpdate
) to avoid reconciling the child component on each position change. It should be fast in this case. Have you tried it?
from react-dnd.
Added this to docs: 6c95eb1
from react-dnd.
Better now, thanks for your support. It's very good
from react-dnd.
👍
from react-dnd.
Related Issues (20)
- Preview Image only works once, on the first drag. HOT 3
- Uncaught Invariant Violation: Expected an existing source.
- Library breaks textareas, inputs etc. HOT 1
- table 拖拽时 使用最新版本的React-dnd Api时 出现node.addEventListener is not a function
- 拖动时useDrag无法访问组件内的变量 HOT 1
- @react-dnd/asap trigger swc error `env` and `jsc.target` cannot be used together
- Custom Drag Layer elements don't update until AFTER I drag it. HOT 1
- Redux v5
- Where is dropEffect coming from?
- Hello! I am kupraa from Indonesia, I am very excited to join the project and the communitystar_struck. Wish the project success and strong developmentheart
- [Question] Working with DnD and PrimeReact's DataTable HOT 1
- Will there be a new version released ? and when will the next version be released? HOT 1
- Missing license for some inner packages
- Unable to drag list item after removing/unchecking particular items. Need help.
- Cannot write a unit test to make sure that it is not possible to drag some draggable HOT 1
- Adding accessibility features to the library
- Jest encountered an unexpected token HOT 2
- Styling not working in the beginning of the tutorial chessboard.
- run demo online throw error
- Drop dragged item if it intersects more than 50% of the drop area 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 react-dnd.