Support dragging a copy (leave original in place)

[rogerjak]

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.

[vrsttl]

This issue is close to two years old. I have a fleeting feeling that it's not going to happen. Too bad.

[pixelass]

@vrsttl If you follow this issue closely you will actually notice that thanks to this issue and all the effort and feedback that has been put into it, this might actually be added in future releases https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-505289437 & https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-456593595 There's a good reason why it hasn't happened yet https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-349155057, though this thread has been helpful to developers and users https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-476059782

[ghost]

@pixelass your version of dnd is aMazing. I'm gonna use it in a proj. If you wanna hook up and feel okey to discuss more. please let me know :)

Also, I compressed your version into something a little thinner. https://codesandbox.io/s/dnd-copy-added-8ig0u - 200 lines in App .

Also be nice if not using the whole this.state for containers. Hard to squeeze your own states ^:- )

[antoine-gmnz]

I have found a way to simulate the copy function you just need to add {snapshot.isDragging && returnContent(snapshot, true)} returnContent function should have the same return than your component (without the Draggable tag). If you want to make it move with the list your should use snapshot.combineWith in order to know if the dragging element is under or above the placeholder and then set it's position with the CSS property translate(). Not perfect but it worked for me !

Same as @demogar . Could you explain alittle more what is suppose to be in the returnContent function?

The returnContent() function should return a clone of the dragging element.

[ghost]

Is there a way for COPY with latest version with react-beatiful-dnd and if so, Anyone that feels generous that could take a short moment of their day to explain how to make it happen? :)

[pixelass]

@stephyswe My version should still work.

Codesandbox (updated dependencies + minor code change to remove warnings & errors for innerRef|ref): https://codesandbox.io/s/vertical-list-with-multiple-drop-targets-y7d7v

[astrosam21]

@pixelass how to split out things in different components, please help i am waiting

[pixelass]

@astrosam21 I'm not sure what you mean. The demo is a simple App container with a draggable model. You can use this in which ever way you designed your App. Please follow the guide provided by this react-beautiful-dnd. My Example is only a POC/Hack to add a copy functionality. You could make your own set of components but that is also up to you. My example is just one of many possible implementations.

[astrosam21]

i want to copy items from one component(say comp1) to another component(comp2) where comp1 and comp2 both are on same page. you could take it as if i want to clone wix drag and drop.

[astrosam21]

@pixelass

i want to copy items from one component(say comp1) to another component(comp2) where comp1 and comp2 both are on same page. you could take it as if i want to clone wix drag and drop.

could you please give me an idea because dragable area and droppable area both are in different components.

[sovanna]

@astrosam21 what @pixelass suggests is that you can organise your <Draggable> <Droppable> as you want.

For your example, you can do something like

App render 
<DragDropContext>
  <Comp1></Comp1>
  <Comp2></Comp2>
</DragDropContext>

Comp1 render
<Droppable>
  <Draggable></Draggable>
  <Draggable></Draggable>
</Droppable>

Comp2 render
<Droppable>
  <Draggable></Draggable>
  <Draggable></Draggable>
</Droppable>

You have App which is on the same page handling everything. You can drag from <Comp1> to <Comp2>

From @pixelass example, You have to pass the appropriate data (in items array) for components and it will work

[astrosam21]

@sovanna let me check if it works

[astrosam21]

@sovanna should i use in comp1 and comp2 both like

comp1 render

comp2

render

[astrosam21]

@sovanna should i use in comp1 and comp2 both like

Comp1 render

Comp2 render

[astrosam21]

@sovanna should i use dragdropcontext in comp1 and compm 2 both

like

comp1 render

[astrosam21]

@sovanna should i use dragdropcontext with comp1 and comp2 also like

Comp1 render

Comp2 render

`

[pixelass]

@astrosam21

I hope this helps: https://codesandbox.io/s/react-brautiful-dnd-simple-t1niq

It's very simple without any additional libraries, using several stateless components.
I made a custom HOC called Copyable which includes the main hack to enable the copy function.
Also look at the styles I added in style.css

[pchr-srf]

@astrosam21 it would be greatly appreciated if you could keep your texts in a single message. Github sends a message per post and as long as you haven't discovered the edit button yet you keep spamming everyone's inbox. Thank you.

[ghost]

@pixelass

I hope this helps: https://codesandbox.io/s/react-brautiful-dnd-simple-t1niq

It's very simple without any additional libraries, using several stateless components. I made a custom HOC called Copyable which includes the main hack to enable the copy function. Also look at the styles I added in style.css

Your sandbox is great, can you also add how to show the selected draggable item when moving it ? It not that I think it is hard to figure out but.. you've senior experience of copy, might as well ask the expert :)

[pixelass]

I updated the example.

• The copy/clone is now blue
• the original (moved) item is yellow while dragging

[ghost]

I updated the example.

• The copy/clone is now blue
• the original (moved) item is yellow while dragging

Wonderful work! 👍 Do you also know how to add a Droppable inside a Draggable? More in detail.. Say I've a Draggable = Container.

Container should also have a X amount of Droppable inside it based on state. ContainerAmount = 2, Two Droppable inside Container.

[pixelass]

@stephyswe It's a little off-topic but there are examples for that: https://react-beautiful-dnd.netlify.com/?path=/story/board--simple

[L-U-C-K-Y]

Thank you all for the great suggestions!

What do you think is required to generate a copy when pressing (and holding) the ALT key, similar to the implementation on React DnD: https://react-dnd.github.io/react-dnd/examples/dustbin/copy-or-move

Cheers!

[millerdev]

It appears that this solution does not work in virtual lists because Draggable is not rendered with snapshot.isDragging === true in that context. Dragging an item in a virtual list appears to re-render all visible list items except the one being dragged, which effectively removes it from the list. Is there some other creative workaround for virtual lists?

[kyeo76]

@alexreardon if you're going to implement this feature it'd be nice if you'd consider this issue #1704

[ariel-frischer]

@pixelass Thanks for showing this great example codesandbox . I would like to know if there is a way to implement this when using renderClone method for draggables. I need to use the renderClone or portal implementation to fix offset, transform, and scroll container issues but following the codesandbox link, the "copyable" draggable just gets dragged along with the renderClone, even with the appropriate CSS styles applied as you have shown.

[pixelass]

@ArielFrischer I'm not sure if I fully understand your question. It's been a long time since I used beautiful-dnd. Maybe you can create a simple sandbox which I can then extend. I currently don't have too much time so I can't provide examples from scratch for every use case.

[ariel-frischer]

@ArielFrischer I'm not sure if I fully understand your question. It's been a long time since I used beautiful-dnd. Maybe you can create a simple sandbox which I can then extend. I currently don't have too much time so I can't provide examples from scratch for every use case.

@pixelass Here is what I've come up with: https://codesandbox.io/s/react-brautiful-dnd-simple-b3ez2, and here: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/reparenting.md is the docs referencing the renderClone method. As you can see, the copyable doesn't seem to get copied to the correct location and so reordering starts to show up again. I totally understand if your too busy just some ideas might help.

[pixelass]

@ArielFrischer I played around for a bit and couldn't find a fast hack. Sadly Codesandbox is currently having extreme issues and constantly crashes, so I'll have to wait until they fix said problem. It does seem like the hack won't work with that setup (renderClone) but I still have a few ideas I'd like to test before I give up.

[pixelass]

I won't be able to explore virtual lists/renderClone until this is fixed: https://github.com/codesandbox/codesandbox-client/issues/3519

[pixelass]

@ArielFrischer @millerdev

Due to the codesandbox issue this cost me quite some nerve:

Here's the new hack for renderClone codesanbox

The key was adding this boolean identifier:

const shouldRenderClone = item.id === snapshot.draggingFromThisWith;

and then using it to flag rendering a clone or the actual draggable.

[pixelass]

Thank you all for the great suggestions!

What do you think is required to generate a copy when pressing (and holding) the ALT key, similar to the implementation on React DnD: https://react-dnd.github.io/react-dnd/examples/dustbin/copy-or-move

Cheers!

This one is really easy, you should be able to implement this yourself. If you have trouble I suggest playing around for a while. Problems are best solved by learning by doing.

Hint: Simply track the user's key input and then optionally use the hack or the regular version.

Something like:

isAltPressed ? <UseCopyableImpl/> : <UseMovableImpl/>

where <UseCopyableImpl/> is using my hack and <UseMovableImpl/> is using the default implementation.

I really gave you the solution right there 🤣

[TJHdev]

Is there any update on adding copy drag for virtual lists? Excellent work on this library btw, very powerful and simple to use.

[pixelass]

@TJHdev Try this hack: https://codesandbox.io/s/react-beautiful-dnd-renderclone-4qvoc

[TJHdev]

Managed to get it working (react-window) with the help of your example. Much appreciated!

[mgpsp]

I'm trying to replicate the codesandbox by @pixelass, but my "source" list is still being animated when I move the item. This is, the item is not removed, but the list is animated just like if the item was removed.

Any suggestions as to why this is happening?

[pixelass]

@mgpsp please provide a codesandbox, otherwise nobody will be able to help you.

[mgpsp]

Here it is @pixelass: https://codesandbox.io/s/react-brautiful-dnd-simple-1iduh?file=/src/index.js

Did not implement any logic as I was only trying to show the animation. Thanks!

[mgpsp]

Solved. I was missing a transform: none.

[jakebresnehan]

@pixelass have you ever extended your copy example to have the ability to drop onto multiple columns?

[pixelass]

@jakebresnehan If you add a little more context to your question I might be able understand it.

I can also highly recommend this talk: I Think I Know What You're Talking About, But I'm Not Sure. https://www.youtube.com/watch?v=GKp5XafacGs

[jakebresnehan]

@pixelass apologies for being vague.

I was looking at your shopping bag example and was curious if you had ever explored the idea of having multiple lists (bags).

I reached out to you, as you were very active in this discussion.

With a little more digging I have come across an example that demonstrates what I was looking for so all is good.

Thanks for the reply. ✌️

[hengkx]

Is there a better solution? I have multiple contexts, only one needs to be copied

[jrr]

Does anyone have an example where you can drag from a set that is two-dimensional? E.g., my toolbox items are inline-block or flex, and wrapping.

I took a stab at modifying the fruit store example, but it's not going very well:

( https://codesandbox.io/s/react-beautiful-dnd-renderclone-forked-7d5u1?file=/src/styles.css )

---

Edit: I've learned that wrapping lists are not generally supported ( https://github.com/atlassian/react-beautiful-dnd/issues/316 ), but am still hopeful! Next I'm going to try breaking up the toolbox into multiple <Droppable>s.

[iamhuynq]

+1

[vmlopezr]

@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

[Kaytmazov]

@NunoCardoso you can render the placeholder as a custom ghost. This would then animate the target Items correctly.

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.

• Source Items

  • type: card
  • width: dynamic
  • height: dynamic

• Target Items

  • type: custom field (anything you want)
  • height: fixed (can be unique per container)
  • width: fixed (something you know or can store if same for all drop-containers)

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. The width issue is on hold since I'm currently creating the entire layout of my app and I hope it will help solve the problems I've had.

Hey. Can you please upload this example to Codesandbox?

[pixelass]

@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"

[Kaytmazov]

@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:

[pixelass]

@Kaytmazov I'm not sure what I'm looking for here. If you want the Fields to only be accepted to Dropzones within a Layout, you need to add logic for that. There are some examples for this: e.g https://react-beautiful-dnd.netlify.app/?path=/story/board--simple

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: When I say foo Then bar should say baz

Actual: When I say foo Then bar says qux

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.