Drag a copy

[rosoft2001]

Seems a very nice plugin, but I need your help to use it.

What would be the configuration to drag a copy from list1 into list2?

Thank you

[jan-warchol]

Hello! Nice to see that people are discovering this library :-) Just to clarify: do you want it to work in one direction (copying from list1 to list2), or in both directions (from list1 to list2 and from list2 to list1)?

[mcFrax]

It means that you'd like to keep the element visible in list1, right?

That is currently not supported. It shouldn't be that hard to write, I think - it would basically mean skipping the special treatment of the source container and not much more - but it may be quite some work to avoid it getting messy.

At the moment I think the best thing you could do would be to add a handler onDropToOtherContainer, create a copy of the dragged element, and put it back in the old place (or, to keep the specific instance of element in place - revert the move and insert a copy into the new place).

Unfortunately, for a solution working out-of-the box the best thing I can do at the momement is to redirect you to Sortable, which is more feature-rich and has cloning implemented (I created Omicron as a more performant replacement of Sortable - the API is pretty similar).

I'll keep this in mind, this feature would be nice to have - I think I can implement it in a few weeks, if all goes well.

[rosoft2001]

Thanks for info, I'll keep an eye on new features.

Speaking of the performance a benchmark would be also nice (from the samples is hard to tell).

[mcFrax]

Right, perhaps side-by-side comparison would show the difference well. I guess I can try to measure the FPS too.

The "performance" here is mainly about the responsiveness - Sortable gets very slow when DOM complexity increases.

[rosoft2001]

Performance is more than important.

For my future project I need to copy from source into destination, not other way around.

In Sortable is: {pull: 'clone', put: false}

It may be a way to use onBeforeDragStart to make a copy and onContainerEntered to not allow drop?

[mcFrax]

onBeforeDragStart is a good idea, that should work. And probably add CSS to give .drag-placeholder height: 0 in list1.

Use forbiddenInsertionIndicesFn: ()=>[] to prevent drops in list1 (on list1 - so that it doesn't accept any dragging). onContainerEntered doesn't have any API for cancelling, so it wouldn't work.

One catch is that if you don't drag the element anywhere, it will be dropped at it's start position, regardless of forbiddenIndices. I think you need to detect this case in onDragFinished and remove the duplicate in this case.

I'd expect some glitches with elements below dragged one moving slightly up and down - it may be resolved with setting something like margin-top:-8px !important; on .drag-placeholder, but I can't really tell without trying it out.

[mcFrax]

I will be away for the weekend, so probably won't respond before Monday. Next week I plan to finally publish Omicron in npm, so it should be available that way, too - and if I have some spare cycles, I'll look into the cloning.

Hope that the solution with onBeforeDragStart works for you - good luck! 🙂

[mcFrax]

Uh, I just realized that forbiddenInsertionIndicesFn: ()=>[] is wrong, it actually needs to return the whole list of indices.

forbiddenInsertionIndicesFn(containerEl) {
    return [...Array.prototype.keys(containerEl.children), containerEl.children.length];
}

Should work. It returns all indices in containerEl.children and the last but one index (which may also be suitable for insertion).

Now, I think it would be neat to have some special value there, like 'ALL'. Or simply add some counterpart to Sortable's {put: false}, as a simpler alternative to forbiddenInsertionIndicesFn.

I published the library in npm. I will aim to release any fixes quickly there too, so it should be a reliable source from now on.