Integrate MultiDrag plugin

[divinespear]

For #104, #536, and #649 🚀

#744 is superseded by this with:

• Example included
• Unit test included 🎉
• implementation is more clearer then Integrate MultiDrag plugin. #744

[divinespear]

@David-Desmaisons if you need something more, let me know

[rowino]

@divinespear there's an error in the module, when you select 2 elements from a list with the first being the first element(index 0) and the second either 3rd or higher (index 2+) then try drop into another list as the first element, the move doesn't work. I've created a sample for quick testing here https://codesandbox.io/s/holy-hooks-8ufo4

Also when you move 2+ items the second is not removed from the list

[JunboJ]

Hi @divinespear,

I have been integrating MultiDrag myself for my company. And I ran into a similar issue that @rowino reported. Please let me know if you have any clue, thanks in advance. And here is something I found.

I have List A and List B in the same group. List A has group = { pull: 'clone' }, so when dragging items from A to B there will be copies left in A. Please consider the case below:

Lists before:
List A: [ a , b-copy, c, d-copy, e ]
List B: [ b, d ]
// b and d have been dragged earlier

Now, if I select a, c, e in List A and drag them to the end of List B. With the code below, there will be a bug that causing the event being emitted is 'update' on List A and 'add' on List B. Although it should be 'remove' on List A and 'add' on List B. This why the item is not moved into List B but instead moved inside of List A in my case.

Lists after:
List A: [ b-copy, d-copy ]
List B: [ b, d, a-dragged, c-dragged, e-dragged ]
// The lists look like this when the code below is running. each '-dragged' marked item will in multiDragElements, and will be dragEl in turn.

For item 'e-dragged'. The oldIndex is 4, I guess it's the old index in List A. And the index(dragEl) will be 4, which is the index of 'e-dragged' in List B. This will take it to the forEach loop. Then in the loop, since the indexes of 'a-dragged' and 'c-dragged' have changed, the update will be true and end up emitting 'update' event.

(This is part of the code of MultiDrag plugin: MultiDrag.js line 420 - 432)

if (oldIndex === index(dragEl)) {
// This works: if (oldIndex === index(dragEl) && parentEl === rootEl) {
	let update = false;
	multiDragElements.forEach(multiDragElement => {
		if (multiDragElement.sortableIndex !== index(multiDragElement)) {
			update = true;
			return;
		}
	});

	if (update) {
		dispatchSortableEvent('update');
	}
}

[divinespear]

@rowino fixed with b994869, please test with it.
@JunboJ I hope this would fix your problem too.

[rowino]

@divinespear I've updated the sandbox with your changes but still the issues persist. Can you try the sandbox, you might better luck than me

[divinespear]

@rowino please check again with 405bc86

[rowino]

@divinespear still not working when you drop 2&6 above 1. I created a separate implementation without multidrag plugin which works as expected: https://codesandbox.io/s/single-drag-with-multi-select-cqivd. It would be nice to have a multidrag version though

[david-mohr]

I have some additional patches to get this working correctly: https://github.com/david-mohr/Vue.Draggable/tree/multidrag

There are a couple of scenarios that trigger unusual event sequences which I have fixed:

• Select many items, but then drag a non-selected item
• Select non-contiguous items, drag them and drop them at index 0 in a different list (triggers an update event prior to add/remove)

What's the best way to add these changes to this pull request?

[juansinmiedos]

Hey guys!

I was using the version from this commit for my project successfully, but since it was closed (apparently over the weekend) I am having trouble to deploy a new version of my app since the following dependency returns now a not found error:

"vuedraggable": "git+https://github.com/divinespear/Vue.Draggable.git#66fd2f8c5e99c65e146b7ebd4ae12d143884dc4f"

Is there any chance that what was in this pull request mught be reopened and reconsider to merge into master?

This pull request made by @david-mohr seems to be working fine for a merge but as I understad that particular PR is for Vue 3

I would appreciate any input in this, since our users were using the functionality in that commit without any issues and now Im blocked to realease new versions of my app (unless I remove the multidrag function which is vital for the users)

Also if there's no way this could be reopened... any advise/tool on how to preserve the multidrag functionality in my current project without having to change all the code?

@David-Desmaisons @divinespear

Thanks

[david-mohr]

@juansinmiedos I have a fork of divinespear/Vue.Draggable here: david-mohr/Vue.Draggable, hopefully you can find what you're looking for there?

david-mohr/Vue.Draggable/commits/multidrag

[juansinmiedos]

@david-mohr I might have done it wrong but it didnt workout for me. For anyone coming across with this issue this solved it for me:

"vuedraggable": "git+https://github.com/midasdev711/Vue-DragDrop.git",