I am pretty new to React.js, what I want to implement is a drag drop component (let us call it DDCom):
DDCom can drag (but not move the original one, more like a clone and that clone move with mouse), and that clone can only drop to other DDCom area (when drag start, each DDCom will show a highlight background area to indicate the drop area)
I really have no idea how to implement this in React.js, could anyone give any code example for this ( or some explanation about how to structure this with FLUX pattern)? Most posts point to React DnD, but it seems so big and hard to understand, what I want is a simple clear work flow of implementation.
You might find https://github.com/Khan/react-components/tree/master/examples useful, within the react components / examples there is a drag drop example.
or http://react.rocks/tag/Drag_Drop
Also looked at React DnD but I agree its hard to wrap your head around it.
Use Dargula.
Its simple and clear and has a react wrapper, react-dragula
This is pretty easy I think with https://github.com/peterh32/react-drag-drop-container
<DragDropContainer targetKey="DDCom" >
<div>Drag Me!</div>
</DragDropContainer>
<DropTarget targetKey="DDCom" >
<p>I'm a valid drop target for the object above since we both have the same targetKey!</p>
</DropTarget>
If you put dragClone={true} in the DragDropContainer, it will drag a copy as you describe.
Then add an onHit event handler in DropTarget to do what you want when the item is dropped on it.
Works on mouse and touchscreens too.
I used the react dropzone package - https://github.com/react-dropzone/react-dropzone. There is even support for material ui.
Related
I try to recreate this effect with curtains-react but I can not find a shader that corresponds, and at the same time make the uniforms work ... If someone can give a lead, an article or an example with curtains-react, it would be of great help to me!
https://www.haritos.co/
It's a infinity draggable slider and when you click on a image, you access to the project, is the raison why I use curtains-react.
I also wanted to use curtains-js in my project. While browsing I found this codepen which is kind of what you need although the click-through is not implemented.
https://codepen.io/AlainBarrios/pen/bXdzmR
It uses curtains-js instead of curtains-react but I think it should be easly convertable. Put the onRender function in the useCurtainsEvent and add event listeners for the draggable events.
useCurtainsEvent("onRender", (curtains) => {})
I would first make a draggable list in react and then add each event of the example one by one. Just remember that animations like these take a lof of time and will to get right :)
I created a draggable drag and drop table with draggable rows.
For the need of my project, i added multiple drop targets with multiple Droppable elements like in this example:
https://codesandbox.io/s/ql08j35j3q
It work pretty fine, but there is one problem, the scroll speed.
When i'm trying to drop an item in an element at the bottom of the page, it gets very slow.
This GIF will show the problem.
Do you have any clue for a solution ?
This may be a result of react-beautiful-dnd autoscroll, interfering with a css property called scroll-behavior. I just spent a day de-bugging this myself.
If you are using bootstrap, by default, bootstrap sets {scroll-behavior: smooth} to the entire html tag. To apply react-beautiful-dnd's fast auto-scroll, this css property should be {scroll-behavior: unset !important}
If you are not using bootstrap, or another library, check your css stylesheets, and see if {scroll-behavior: smooth} is set anywhere in any parent containers to your Droppables, and unset them.
A good way to debug this is by also opening Inspect Element in your browser, and looking at the styles applied to the html, body, or parent containers to your Droppables.
It appears that when scroll-behavior is defined in css or javascript( if you use window.scrollBy()), it may interfere with react-beautiful-dnd's fast auto-scroll feature, and make it slow.
Let me know if this works for you :) !
Here is my example in a gif - All the containers in the column are droppables
In React Native, I would like to achieve the following outcome (example):
example1 example2
On Long Press of the image (or touchableOpacity), I hope to display an overlay view of some extra information (could be images or text). The information disappears when the finger leaves the screen. I was thinking if it is something related to overlay view and setState, but I could not find the function where the view only appears during long presses. Is there a way to achieve this? Or is there a module that could provide a solution?
Any help would be appreciated!
If you are using the latest react native version you can use the onPressOut functionality of a pressable component: https://reactnative.dev/docs/pressable.
Trigger the show overlay with the onLongPress (or onPressIn but it's not a good UX) function and then trigger the hide overlay with onPressOut function.
For the overlay I suggest you a cool library like:
https://reactnativeelements.com/docs/tooltip/
I'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.
I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.
(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)
The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:
React Joyride: https://github.com/gilbarbara/react-joyride | Live Demo
reactour: https://github.com/elrumordelaluz/reactour | Live Demo
Both seem to have similar features:
Instruction modal that explains about an element on the page.
The modal is positioned next to the highlighted element.
The window will scroll down to the highlighted element if it's outside of the viewport.
The element is highlighted to bring more attention while the rest of the page is in the backdrop.
There are steppers on the modal to indicate which step you're on.
swipeable navigation
Whats the best approach to make link area swipeable left and right?
Ive failed to find ready to use component that allows to do that.
Ive tried to use React Touch SyntheticEvent and transform translateX to navigation bar, but failed with calculations. So question is what are the ways to achieve that and is there any react components that can help me to make this work?
Maybe you need to have a look at there.
Although it only supports element swipeable up and down, you can refer to the code of how the author implements element swipeable with translate3d.
The main idea of swiper is to calculate the position of the element, and when to start translation. You can record scrollHeight/scrollWidth and offsetHeight/offsetWidth when you start move event, and compare the value of them when the event is end. Then you know where is the element, and you can control the transform of the element as you want.
So far as I know, maybe Iscroll is a good solution for you.