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 notifications@github.com 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 ^_^

[ghost]

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

[ghost]

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?