Recently, the project Im using is lib react-dnd. Im in trouble w the bug so plz help me.
BUG: Drop both top n bottom of component.
Describe: In base I have 5 dragsources, 2 droptargets. when base have no component, component will render together with 2 droptargest on top n bottom.
=> when users use hover to 2 droptargets up and bottom, drop will be in that situation.
A kind of tree view
TROUBLE; Hover can not detech child droptargets below ( target base still on top), so I can not drop it
To make it clearer, checking attached photos
Thank you so much for taking your time and consideration.
Please let me know If i go wrong in rules of how to post question on StackOverFlow.
enter image description here
Related
Lets say I have a website where I have some components and main panel. The idea is to take components and add them to the main panel (like a website builder of some sort). And the question is how do I know if I have one component on top of another? Also it would be perfect if i'd know the coverage area size
Note: I dont like the idea of checking positions for every element on this panel. If it can be done with getters or something similar i'd be happy
you can always use "inspect element" option in Google. There are so much option for developers.
and of course if you are developing something you would have an assumption about the initial position, so this is not a problem while doing.
What i want that are:
Create three draggable objects with different widths and heights.
Create one-button which aligns them all horizontally and another that aligns them vertically on the page.
Few things i want to share.. Well i have googled similar to this task for few hours. So far i got something like which for only one, one & only single object drag n drop. I don't find anything for multiple objects. I tried to complete this taks on those existing demos. But couldn't not successful.
Can anyone help me? Please. One more thing, it will be better if the solution is provided on jsFiddle or codePen instead of here's code snippet.
Thank you in advanced.
`http://jsfiddle.net/maniator/zVZFq`
Please have a look. Although it will not solve your task completely (the way you described) but partially (1st list point) solves. Hopefully, it will push you to complete the task.
Updated:
Demo i have done the task for you. Hope this will satisfy your task completely.
I have created a table in React Table. I want to add both drag and drop functionality on columns and rows. How can I do this?
Here is my CodeSandbox Sample - https://codesandbox.io/s/2wp7jk23kr
Here I have got a Code Sandbox for drag and drop rows - https://codesandbox.io/s/1844xzjvp7
Here I have got a Code Sandbox for drag and drop columns - https://codesandbox.io/s/5vxlnjrw1n
Being a beginner In React, I'm not able to integrate this three sandboxes. Can someone fork a good example on CodeSandbox on how to add both drag and drop functionality on columns and rows?
Please use my React Table data columns - https://codesandbox.io/s/2wp7jk23kr
It's not that hard to make it, but still no convenient way yet, I had a try and let's see the result in sandbox: https://codesandbox.io/s/quizzical-leakey-o5h8z
Then let's see what's going on in Table.js
1.When you start dragging, you do not know which direction it is going, so I just hide the snippet (by setting it to empty div)
2.When you first drag it into another cell I got to know the direction, and then lock the direction inside dragState.direction
3.When you drag it into an cell (including first time in step 2), you need to show the changed data, like rows = offsetIndex(dragState.row, dragState.dropIndex, rows), notice it is different depends on dragState.direction
4.We highlight the row/column we are dragging, with opacity: ....
5.Finally on dragEnd we notify parent component what have changed
It's not good enough yet, specially when the drag is cancled. So don't rely on these code too much, find your own way based on this idea
I am trying to implement a drag and drop list view item, where I can drag from a listview and drop into another.
The big problem I am facing is the "zIndex" from the ListView children, I can't figure out how to get the child row to stay above the other views when I move that
You Can find the code I made here: https://gist.github.com/zr0n/5f4f1ca6ca371e5a5264a4d2de1ae733
Please, save my day anyone
I solved this. I found an interesting workaround in this repository: https://github.com/deanmcpherson/react-native-drag-drop
It was hard to found, once it is not even a npm module.
It creates a transparent modal and clone the dragging content on it, so it stay above the other views. I needed to make a little fix to use it with TouchableOpacity/TouchableHighlight/TouchableWithoutFeedback and made a pull request:
https://github.com/deanmcpherson/react-native-drag-drop/pull/3/commits/dd16534b8d5d73ff2c95b92c2649c5a176b42986
If you need a Touchable Draggable and when you are reading this the PR was not approved, use my fork with branch Touchable_Children:
https://github.com/zr0n/react-native-drag-drop/tree/Touchable_Children
So, recently I have been trying to build a user interface form builder that is almost entirely drag and drop. Kind of like Dreamweaver or visual studios I suppose. You guys can see it for yourselves HERE! I am trying to get a right-click menu thing going, however upon getting this working, I realized that it really conflicted with both the draggable and resizable methods. I don't have to right click at all, however when I go to resize or drag, it won't let me stop it. My cursor gets stuck either resizing or dragging, and requires vigorous clicking and shaking to free it. So, I'm assuming that I need a different plugin. Does anybody know of a stress free simple right-click menu that is hopefully compatible with jquery ui? I've tried google but most of them are simply a different version of the one I've already been using.
My second question is much more vague. As I previously mentioned, I'm trying to make a form builder. I'm wondering what the best way to go about this is as I feel sort of lost. My biggest problems right now are figuring out how I'm going to parse everything into code and export it. Does anybody know of anyone else who has attempted this or something similar? Is there any sort of guide?
I know the second questions has potential to be rather annoying, so feel free to only focus on the first one. Any help is appreciated, and I thank everybody who helps me.
EDIT: Just realized that you guys may not know how to use the builder. So far, all you can do is drag panels out onto the building space, and then drag tables within the panels. You can resize the building space, and panels vertically, and you can resize tables both vertically and horizontally. You can move panels and tables within their parent elements. Right click a panel or table for the contextmenu.
EDIT: So I think I found a context menu that will suffice, here it is. So, I guess that only leaves giving me advice on how to go about constructing this form builder.