-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support dragging a copy (leave original in place) #216
Comments
At this time we are not supporting a copy drag. This goes against the physicality this library is aiming for |
Thanks for reaching out! Perhaps this suggestion would be useful to you: #155 |
I have the same requirement, are you sure this isn't possible? |
@Geczy I moved on to react-sortable, after some hacking I got what I wanted. |
Damn. Not supporting copy is a showstopper for me. |
It's not that hard to implement clone/copy already. In your source Then, you just need to make sure in your The only caveat is that the custom placeholder part will probably stop working when the library is upgraded to React 16, as there are numerous mentions in the docs of plans for the explicit placeholder to go away. @alexreardon, it would be great if the updated library were to provide a hook for rendering the placeholder to support this kind of customization. |
I will take a look into it as we update for react 16. But as mentioned it
does go against the physicality we are going for. It is not confirmed how
we will do placeholders yet so you might be able to get away with your
current approach anyway
…On Fri, 23 Mar 2018 at 9:30 pm, alexmcmanus ***@***.***> wrote:
It's not that hard to implement clone/copy already. In your source
Droppable, set isDropDisabled={true}. This stops the source re-ordering
when you drag an item - but it will leave a blank space behind when you
start dragging. To avoid the blank space, in your Draggable, customize
the rendering of the placeholder. If placeholder is not null, render
whatever you'd like left behind, at the same width and height as the
original. E.g. { provided.placeholder ? (this.renderMyOwnPlaceholder()) :
null }.
Then, you just need to make sure in your endDrag() that you don't remove
the item from the source collection.
The only caveat is that the custom placeholder part will probably stop
working when the library is upgraded to React 16, as there are numerous
mentions in the docs of plans for the explicit placeholder to go away.
@alexreadon, it would be great if the updated library were to provide a
hook for rendering the placeholder to support this kind of customization.
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
<#216 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ACFN7eb5FbDRWBZdXK-rrSWjLx5MQO1Mks5thM64gaJpZM4Q0kPd>
.
|
Regarding the physicality: Maybe the "cloning" could be regarded as an infinite pile of the same item? :) |
We are considering @alexreardon Is this still feature request something you're considering? Does the workaround outlined here work still? PS: Demos & docs make |
I have same requirement for copy drag because I need to implement a toolbox component. |
I have same requirement for clone drag |
@rivneglee did you find something for implement your toolbox component? |
I am happy to think a little bit more about this one. But for now it is fairly low priority |
I updated two files and it works pretty good so far. render a copy of the draggable item when isDragging is true, and this will leave a palceholder space, so I updated the placeholder file to hide the placeholder if you pass variable isCopy = true. you can see an working example from https://hungry-curran-3f8f19.netlify.com under single vertial list -> copy clone |
This would be quite useful in form builders where you drag new elements onto a page. |
I understand how the physicality of the idea would be damaged, still, I think this would be a reasonable addition. |
could be great to put a higher priority on this feature proposition ;) |
One more request for some kind of dnd builders. |
+1 for this feature. Here's an idea for a more or less stable workaround: (use case: dnd builders)
{(provided, snapshot) => (
<React.Fragment>
<Item
innerRef={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}>
{item.content}
</Item>
{snapshot.isDragging && (
<Clone>{item.content}</Clone>
)}
</React.Fragment>
)}
const Item = styled.div`
/* item styles */
`;
const Clone = styled(Item)`
+ div {
display: none!important;
}
`;
Since the suggestions with using |
Very cool, pixelass, I was looking for a solutioin like that. Edit: it was a problem in my code, it works now. Still, great tip on how to do sticky draggables. |
@NunoCardoso you can render the placeholder as a custom ghost. The source element can be customized but there is no way of knowing the width of the target container unless it's fixed. A setup like this could help get perfectly smooth transitions.
Here's an earlier prototype of what I',m working on: (you can see there are still issues with the size.) I played around with a toggle mechanism for the items but height is mostly an issue when dragging tall items. |
@alexreardon : If this feature were to be implemented, it would also be nice to be able to drag one of the copies back to the starting area as a way of removing it from wherever it had first been dragged, but without the draggables in the starting area moving around. Just a reverse of the drag from the starting area. |
+1 for the copy/drag feature — it has precedent in other OS's — Mac OS has long let you copy an item, rather than just move it, in the Finder by holding down the 'option' key while dragging; in Windows, you do the same holding down the 'control' key. would love to see this feature here, also. |
@TJHdev How did you get the copied draggable working with react-window? I'm having issues getting the copied item working correctly. At the moment the copy shows up, but the item below is cleared and the list moves up. Here's a sandbox forked from the react-window example. This just tries to implement the draggable item, with a copy left behind (i.e. the list should not be flickering/moving) https://codesandbox.io/s/simple-virtual-list-dark-forked-wc1g4 |
Hey. Can you please upload this example to Codesandbox? |
@Kaytmazov I never made a sandbox for this. It was just a prototype and I dropped the project I needed this for. I extracted all the important parts and provided sandboxes for all features, you just have to put them together. Keep in mind: "the clone can be any other component, therefore this is entirely up to you" |
I'm trying to make form builder. I have issue with nested dropareas. When I put two droparea inside flex parent or make droparea 'inline-block' i get this: |
@Kaytmazov I'm not sure what I'm looking for here. If you want the But again, I'm not sure what you're talking about. Instead of writing "This happens:" and adding a gif you could be more precise. Here's an example of describing errors to make them understandable. Expected: Actual: All together this issue is really just about a copy option which has been provided by various workaround suggestions. If your issue is not related to the copy please look for related issues or open a new one. If you need support you might want to check some online forums/chats instead. |
+1 for the copy on drag Just a suggestion, i understand it may not be implemented officially (though i hope it will) |
I'll happily provide new examples/hacks if it breaks for certain versions. If you agree, I would open a PR with a story in: https://github.com/atlassian/react-beautiful-dnd/tree/master/stories |
I found an alternative library that supports copying, maybe help you. |
The main problem I see here is that it's not accessible at all. Actually the entire demo page is 0% accessible which makes me wonder. |
@vmlopezr Take a look at this example: https://codesandbox.io/s/q3717y1jq4 For me the trick was adding this: Is this documented anywhere other than examples? |
@vmlopezr I have implemented the copying it took me a while to get the exact thing what I want here is the resultant gif You can play with the builder on https://w-builder.netlify.app/ and let me know if this the thing you want. |
I solve this with following code :
|
Hi there, I am currently trying to implement your solution to my own project but not getting the same desired effect. I have added the conditional and the Could it be an issue with how I am setting state for the list of draggables? Would appreciate your help with this and many thanks in advanced! My codesandbox: |
@munjyong Please look through the comments. I provided several new hacks for different use-cases and versions. AFAIK the example above does not work since v10 of RBDND |
Thank you for your reply. Which comment specifically can I ask? I am struggling to find a compatible one for example the one with the fruits and shopping bag requires a |
@munjyong I used @xuzhanhh solution to fix this issue.
|
Hi @pixelass thanks for you examples. I'm trying to implement your solution, but i'm running into an issue where the dragged item doesn't get added to list. I'm getting the below error: However, I have codeSandbox here. Thanks in advance. |
@alii13 This looks great, would you share the code example? |
@akarpov91 All I did is provide some hacks which I'll try to maintain/extend when required. Your question is related to state handling or API questions. "This issue" is probably not the right place to ask that question. You can try Stackoverflow or a similar help-forum. If you think you encountered a bug please open a new ticket Thank you for understanding |
Just an update with latest version for anyone want to try, this solution works without any issue for me. The one about setting |
const Kiosk = useMemo(() => {
return ({ provided, item, snapshot }) => {
const currentScroll = useMemo(() => document.documentElement.scrollTop,[summaryItems])
const elementTop = provided.draggableProps.style.top
return (
<div>
<div
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
style={{...provided.draggableProps.style,
paddingBottom: '8px',
transform: snapshot.isDragging ? provided.draggableProps.style?.transform : 'translate(0px, 0px)',
}}
>
<div style={{border: `1px solid black`}}>
<h1>{item.title}</h1>
</div>
</div>
{snapshot.isDragging && (
<div style={{...provided.draggableProps.style,
position: "absolute",
top: currentScroll + elementTop,
transform: 'none !important',
paddingBottom: '8px',
}}>
<div style={{position: "relative", border: '1px dashed black'}}>
<h1>{item.title}</h1>
</div>
</div>
)}
</div>
)
}
},[summaryItems]) an update with the latest version using virtual lists. |
@wibed I've been trying to implement your solution for virtual lists but I'm without success. Would you be willing to provide a codesandbox example? I've been able to create the clone in place of the item I'm trying to copy, however all the items below in the virtual list shift up and under my clone. What's the idea on dealing with the shift? I'm using |
I got the transition you did implemented. Realized my style was being overwritten by provided style in my ListItem component. All good 👍 |
I also have a similar requirement where I need to have the copy of the main tasks in a selected tasks tasks. So to remove the task from the selected tasks column, I have provided a delete button in the task. When the user clicks the delete button, the task gets removed. But now, when I try to drag the task again from the all tasks to selected tasks, i am getting draggle id not found error. This is my code: https://codesandbox.io/s/unruffled-waterfall-wdyc5?file=/src/initial-data.js:437-445 . Please take a look and give a solution if possible. |
I was able to get the "drag and copy" feature going by treating the drag event as purely an "event generator". What I mean by that, is when you drag from a source that is meant to be copied, your event is essentially "create a new task using what is being dragged as a template". "as a template" is critical because that forces you to realize that you need to create a new and distinct id for your new task. The "feature" that I needed from the beautiful dnd package was the ability to prevent changing the list from which the item was being dragged. In order to accomplish this, and in this sense, I was creating a "clone": one to remain in place, the other to drag to a new destination. The drop event into the "selected tasks" column is the event that I need to realize my intent as discussed in the first paragraph (i.e., go and build a new task using what I'm dragging as a template). So, it's an event generator because I use the event to subsequently determine if the particular drop event is in fact a "copy" this task event. I did not see where in your code that you generate a new instance of the task component with a new, and unique id. I suspect that you don't. I hope this helps. |
I think so |
@munjyong I used @xuzhanhh solution to fix this issue. this code in here.. |
Is it possible to keep the dragged source in the list and instead drop a copy of it?
I have four lists/columns:
| Available objects | When | And | Then |
and I need the items in the first column to always be there.
The text was updated successfully, but these errors were encountered: