support for clone(copy) element

[atzcl]

trafficstars

Hi, Thank you so much for creating such a great library. Just want to ask if there is any plan to support the functionality of cloned elements, similar to dragula copy / Sortable pull: 'clone' function.

Please forgive my bad English :sweat_smile:

[tsov]

Thanks for your request @atzcl ! Yes, we are planning to build in a copy feature for Sortable, which will work similar to dragula copy function 👍 I think it's already part of the project board (https://github.com/Shopify/draggable/projects/3)

I'll let you know in this issue once we release this in a beta!

Thanks for your contribution

[atzcl]

@tsov Great, look forward to its arrival, Thanks you

[diptigajjar]

@tsov Is there any clone feature in Shopify?

[albertodarblade]

waithing for this feature... its so usefull to have :D

[Karla121]

+1 waiting for this too, is there a workaround maybe?

[mindmind]

still no feature?

[sharansirius]

Is it available now? @tsov @beefchimi @owen-m1

[owen-m1]

@sharansirius I haven't added this and there haven't been any other active maintainers recently, so I'd recommend SortableJS for now if you really need this feature. I don't have time anymore to maintain this actively.

[duebbert]

I've needed this function too. It's pretty straight forward with the current functionality, so for those who might need it, here is how I've done it (code transcribed, so might need some fixes but the general idea should be clear):

// Using some globals for this example only
let initialDropzone = null;
let clonedNode = null;

function dragStart(e) {
  // Record the initial dropzone because we want to use it in droppable:dropped.
  initialDropzone = e.data.dropzone;

  // Clone the source node and insert after the original node. Adding a class for
  // some styling.
  const originalNode = e.data.dragEvent.data.source;
  clonedNode = originalNode.cloneNode(true);
  clonedNode.classList.add("draggable-clone");  
  originalNode.parentNode.insertBefore(clonedNode, originalNode.nextSibling);
}

function dragDropped(e) {
  if (!clonedNode) return;

  // If the current dropzone is our initial one, then hide the cloned Node
  // because otherwise you have the cloned node plus the dropped node.
  const dropzone = e.data.dropzone;
  if (initialDropzone === dropzone) clonedNode.style.display = "none";
  else clonedNode.style.display = "inherit";
}

const droppable = new Droppable({});

droppable.on("droppable:start", dragStart);
droppable.on("droppable:dropped", dragDropped);