Running multiple vue instances each using this library causes an exception

[joerattz]

I switched from using vue3-smooth-dnd for the same technical issue you reported here:

https://stackoverflow.com/questions/58070311/react-smooth-dnd-library-causing-and-illegal-invocation-error

My issue didn't manifest itself in testing though. It manifested itself when loaded by single-spa. So I switched to your vue-dndrop library.

In our app, we are running multiple vue instances, each of which is using this library. One of the instances is an MFE handled by single-spa. The other is a served up module containing some vue components that live in their own vue instance.

Having this library imported on the same page more than once causes errors in the onMouseDown() function.

The problem is caused by this code.

function onMouseDown(event) {
  var e = getPointerEvent(event);

  if (!_isDragging && (e.button === undefined || e.button === 0)) {
	grabbedElement = getParent(e.target, '.' + wrapperClass);

	if (grabbedElement) {
	  var containerElement = getParent(grabbedElement, '.' + containerClass);
	  var container = containers.filter(function (p) {
		return p.element === containerElement;
	  })[0];
	  var dragHandleSelector = container.getOptions().dragHandleSelector;
	  var nonDragAreaSelector = container.getOptions().nonDragAreaSelector;

The onMouseDown() function gets called for each vue instance on the page but when it gets called for the instance(s) that is/are not the correct one, the containers array will be empty causing the filter() function to return undefined resulting in the container variable being undefined. When we then call getOptions() on the undefined container we get this error:

vue-dndrop.esm.js?43d0:1290 Uncaught TypeError: Cannot read properties of undefined (reading 'getOptions') at HTMLDocument.onMouseDown (vue-dndrop.esm.js?43d0:1290:1)

Adding containers.length && to that first if statement resolves the error.

if (containers.length && !isDragging && (e.button === undefined || e.button === 0)) {

And you should still probably make sure that the container variable is not undefined before calling getOptions() on it.

But you can still only drag an item the first time.