I am working on drag drop functionality where one can drag node from list A(source) and drop to list B(destination).
I am facing problem of when once dragged and dropped first node and opens model on-click, I have to set some question within ng-repeat.
But when i am dropping same type of question, then values set to previous one is remains to newly dropped question's model.
How i can avoid such a problem?
I am using this ui-tree example for drag and drop.
Following image is snapshot of it?
https://i.stack.imgur.com/jIJsQ.png][2]
Please share your opinion!
Related
I want to be able to drag, rearrange, and move them from 1 list to another. Functionally it currently partially works in that you can drag an item once and it updates but after that you can no longer move the items inside the list.
Example here:
https://codesandbox.io/s/react-dnd-multiple-lists-8z7vs?file=/src/question.tsx
Any hints or pointers would be very helpful.
Thanks
I have created a new example here:
https://codesandbox.io/s/eager-perlman-zs3xm?file=/src/Container.tsx
It is simplified, I am now able to drag a component from one section to another. But it seems to bug out when trying to drag from one to another.
Has anyone worked on Ext JS here, I need help to resolve an issue.
There are two multiselects Component, and I need to drag and drop items from one multiselect to another.
The issue I am facing is: I am able to drag from One MultiSelect(1st) and drop to another MultiSelect(2nd) only when I am dropping over an already existing element in 2nd MultiSelect.
I am not able to drop to 2nd MultiSelect when I try to drop over an empty space.
I tried to look at the code, but didn't found anything. Is this the way the MultiSelect component works in Ext JS.
I'm trying to do something like below:
Scenario 1: User will drag and drop List 1 from left side to right side.
Scenario 2: Again, User will drag list 2 to right side, when that dragging item hover on list 1, have to show drop zones to drop that list 2 item here.
Finally, List 1 and List 2 both will be placed like left and right side.
With React Dnd, Is this achievable? and I tried this it works only while dragging. https://stackblitz.com/edit/react-pctpdh
I'm able to show a drop area while dragging, it shows every time, but I need to show that drop area only hover on some item.
Below is the sample work, I have to achieve:
Need to show placeholder to drop an item while hover other items to drop. (Need to Create dynamic drop targets while mouse hover some item)
I need a help on this to achieve this feature.Any idea on this really commendable.
I saw the code snippet and i added some new code that replicates your desired behavior.
The idea is to create a separate component to handle drop actions, that can be reused when is needed. In this particular case, I choose to use the component inside your ListItem component to create two drop zones on both sides.
Here is the updated code: https://stackblitz.com/edit/react-pctpdh
Is there a way to modify item once dropped into Drop Target with React DND ? I have a basic Card with an image and text block. By default, the text is not shown (display: none).
I would be able to change this attribute so that once dropped, text block is shown in drop zone..
Can someone explains me how I can do that please?
I tried with endDrag function but it is the drag source which is modified, not the drag item itself...
Thanks.
I have a problem with extjs gridpanel dragdrop.
the scenario is as follows:
The gridpanel is initially rendered by loading a remote store.
Then, the rows are added, updated dynamically.
Drag drop feature is implemented on "render" event of gridpanel.
Drag drop works fine for the originally retrieved rows from the remote store.
but when i try to use drag drop for the newly added or edited rows, it doesn't work.
I am getting the following error on firebug:
Index or size is negative or greater than the allowed amount" code: "1
This is may be because , the newly added rows are not taken as a part of the store . I tried changing the event to "click" but it doesnt work that way..
Please please suggest a solution for this fast.. Its needed urgently.
Thanks,
Shreya.
I know 2 methods for drag and drop in ext, one of them is only for grid rows, the other one that I'm using is with setting dragzones and dropzones. With that method, the only thing you have to do is catch an event which is fired when you add new rows to the grid. In that event, set every new row to be a dragzone (so it can be dragged). That's what I did in a similar situation. Hope this helps..
By the way grid rows don't have a .el (DOM element attached to the Ext component, which is the row in this case). So you'll have to create a div for each row component and then use the initializeDropZone(row[x]), where row[x] is the new added row.