React-beautiful-dnd: 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.

[alexreardon]

At this time we are not supporting a copy drag. This goes against the physicality this library is aiming for

[alexreardon]

Thanks for reaching out! Perhaps this suggestion would be useful to you: https://github.com/atlassian/react-beautiful-dnd/issues/155

[Geczy]

I have the same requirement, are you sure this isn't possible?

221

[rogerjak]

@Geczy I moved on to react-sortable, after some hacking I got what I wanted.
Granted; not as nice as beautiful-dnd would be...

[HenrikBechmann]

Damn. Not supporting copy is a showstopper for me.

[alexmcmanus]

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. @alexreardon, it would be great if the updated library were to provide a hook for rendering the placeholder to support this kind of customization.

[alexreardon]

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 [e-mail]
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
https://github.com/atlassian/react-beautiful-dnd/issues/216#issuecomment-375610716,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7eb5FbDRWBZdXK-rrSWjLx5MQO1Mks5thM64gaJpZM4Q0kPd
.

[pchr-srf]

Regarding the physicality: Maybe the "cloning" could be regarded as an infinite pile of the same item? :)

[t1mmen]

We are considering react-beautiful-dnd as react-dnd replacement, but no copy would be a showstopper for us.

@alexreardon Is this still feature request something you're considering? Does the workaround outlined here work still?

PS: Demos & docs make react-beautiful-dnd look exceptionally well done 👏

[rivneglee]

I have same requirement for copy drag because I need to implement a toolbox component.

[jerryliu]

I have same requirement for clone drag

[dvirben123]

@rivneglee did you find something for implement your toolbox component?

[alexreardon]

I am happy to think a little bit more about this one. But for now it is fairly low priority

[yingchangwu]

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

[circlingthesun]

This would be quite useful in form builders where you drag new elements onto a page.

[vrsttl]

I understand how the physicality of the idea would be damaged, still, I think this would be a reasonable addition.
Edit: anyway, I would imagine a copy function's physicality as getting cookie dough on your fingers and pulling it out of the batch. I think if you guys implemented something like this, the programmers of the world would relate and rejoice :)

[Aarbel]

could be great to put a higher priority on this feature proposition ;)

[TrySound]

One more request for some kind of dnd builders.

[pixelass]

+1 for this feature.

Here's an idea for a more or less stable workaround: (use case: dnd builders)

Code sandbox example

(cloned from https://codesandbox.io/s/ql08j35j3q via https://github.com/atlassian/react-beautiful-dnd#basic-usage-examples)

• while dragging a static item, it is rendered twice. One with injected properties and the other one without. (This way the second one will stay in place as a "ghost")

{(provided, snapshot) => (
    <React.Fragment>
        <Item
            innerRef={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}>
            {item.content}
        </Item>
        {snapshot.isDragging && (
            <Clone>{item.content}</Clone>
        )}
    </React.Fragment>
)}

• The div after the "duplicate" is then hidden via display: none!important and the + div selector.

const Item = styled.div`
  /* item styles */
 `;

const Clone = styled(Item)`
  + div {
    display: none!important;
  }
`;

• this only happens in static lists. moving between dynamic list still performs as originally intended.

This idea should pretty much solve the problem without any hard mutations and enough flexibility to build something that can easily be refactored when the feature gets implemented into core.

Since the suggestions with using{snapshot.placeholder && SOMETHING} don't work (placeholder is always null unless a new item is added (moved) to the list, which is not the case if dropping is disabled or elements are reordered), I looked around and stumbled upon the following comment several times: https://github.com/atlassian/react-beautiful-dnd/issues/155#issuecomment-340712628.
It took me a while to realize that the answer was hidden within. 🎉
This video helped a lot to understand blocking drags and drops: https://egghead.io/lessons/react-conditionally-allow-movement-using-react-beautiful-dnd-draggable-and-droppable-props

[NunoCardoso]

Very cool, pixelass, I was looking for a solutioin like that.
I still have a problem, when I drop into the target area, the animatiom is still a retreat to the source area.
Any idea why this happens, and how to fix it?

Edit: it was a problem in my code, it works now. Still, great tip on how to do sticky draggables.

[pixelass]

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

[instadrew]

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

[faddah]

+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.

[kingcanova]

+1 for the copy/drag feature from me as well, I would love to see this added!

[EdmundsEcho]

I greatly appreciate the design’s conviction to “physicality”.

However, I’m not sure this feature request diverges from what we are already doing.

Given we are able to create a new item... to instantiate something that becomes our physicality, how is this concept to instantiate a new item, different from doing so using a template aka, an already instantiated dnd component.

- E

[alexreardon]

I am more open to this one. A lot of people would find it extremely useful. We would not be looking at it until we finish our Up next milestone

[kohenchia]

This technique no longer works under the latest version (10.x), because they removed snapping. It's a bit hard to explain, but here's an example. All I did was take the example above and update the react-beautiful-dnd version to 10.x:

https://codesandbox.io/embed/1ykz68njw7

In prior versions, this technique relied on the pre-snapped white space to exist as a <div> instantaneously upon dragging, then hiding it with the + div { display: none!important } CSS trick. It also relies on the fact that the pre-snapped whitespace exists up until the very last moment when dragging stops, at which point the CSS display hack also no longer applies.

In the new world where the pre-snapped whitespace is made to shrink in a fluid manner and then disappears, the CSS hack will eventually hide the next item (<div>) down in the list, resulting in one missing item upon dragging. If the CSS hack is removed, this results in janky visualization where the whitespace appears for a short period, pushing down the remaining items, then shifting them back up as the whitespace disappears.

~I don't know what a new workaround would look like, but I would appreciate someone trying to come up with one.~

EDIT: Workaround is to just use 10.0.4 instead of 10.1. Then the @pixelass workaround works perfectly.

[pixelass]

@kohenchia thx for reporting.

Here's a new hack:

const Clone = styled(Item)`
  ~ div {
    transform: none!important;
  }
`;

https://codesandbox.io/s/q3717y1jq4

[alexreardon]

I love the resourcefulness of this thread. I am not committing to shipping copy + drag, but it will be thought about as a part of #68

[alexreardon]

Related: we might need this for #1225

[adirzoari]

@pixelass is there any way to reorder list? in the example on codesandbox it only allow when to "reorder" when there is blank list.. but for example if I insert in one list image and second list text, I want to make the list with the text first and with the image second..
kind of sortable lists

[pixelass]

@adirzoari can you make a screenshot with annotations?

I’ll try to make an example but I currently don’t fully understand the question

[adirzoari]

this picture I have 2 list. first list 1 include "copy", second 2 include "slideshow". I want to make sortable. list first will be the "2" with slideshow item and the second be "1" with copy item

[jimmycarry]

It doesn't work in 11.0.0 version example :

[jimmycarry]

sorry, see the example

[davidosomething]

@jimmycarry you need to use transform: none !important on the clone's sibling style, not display: none

[lauralouiset]

+1 for copy/clone support! I need this feature, but as I also want touch and keyboard accessibility, react-beautiful-dnd is my first choice of library. It seems a damn shame to have to choose between these two things :-(

[alexreardon]

Perhaps we could revisit this decision if we enabled the ability to disable reordering for a list (but still allowed dragging from the list)

[kala888]

need it!

[beamercola]

pixelass is my new daddy

[Anwardo]

+1 for copy & clone, it's such a shame this library doesn't support it. Other than this react-beautiful-dnd has everything I need.

[lcoder]

Thanks.Your code helped me! @pixelass

[momesana]

+1 for copy & clone.
I would also really appreciate it if the feature finds its way into a future release.

[ssjunior]

+1 for copy & clone

[nicubarbaros]

+1 ^_^

[muhammedmagdi]

@kohenchia
This code is working with me at the latest version.

const Item = styled.div `
   user-select: none;
   border: 1px
   ${props => (props.isDragging ? "dashed #000" : "solid transparent")};
   transform: ${props => !props.isDragging ? "none !important" : ""};
`;

[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 !

[ricky-sandoval]

+1 Copy and clone

[demogar]

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 !

@antoine-gmnz can you elaborate more on this?. I notice the combineWith property is always set to null, at least on my current tests.

[stephyswe]

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?

[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

[stephyswe]

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

[stephyswe]

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.

[stephyswe]

@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

[stephyswe]

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?

[jaredt67]

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

[kelvinkoko]

+1 for the copy on drag
And then resource here is great! i will try the hack to see whether it still work in latest version :)

Just a suggestion, i understand it may not be implemented officially (though i hope it will)
But maybe it will be great to put this as an unofficial example (community example)?
It take quite a lot time to finish reading this thread😅

[pixelass]

I'll happily provide new examples/hacks if it breaks for certain versions.
@alexreardon what do you think about adding examples with this workaround/hack?

If you agree, I would open a PR with a story in: https://github.com/atlassian/react-beautiful-dnd/tree/master/stories

[Denisbeder]

I found an alternative library that supports copying, maybe help you.

https://kutlugsahin.github.io/smooth-dnd-demo

https://github.com/kutlugsahin/react-smooth-dnd