MaxLeiter / sortablejs-vue3

A thin wrapper around Sortable.js for Vue 3
https://sortablejs-vue3.maxleiter.com
MIT License
380 stars 21 forks source link

MultiDrag errors #104

Closed CurryAyam closed 9 months ago

CurryAyam commented 9 months ago

Having issue with multiDrag i've added the plugins into boots (using quasar)

import { boot } from "quasar/wrappers";
import SortableJs from "sortablejs";
import { MultiDrag } from "sortablejs/modular/sortable.core.esm";
SortableJs.mount(new MultiDrag());

import { Sortable } from "sortablejs-vue3";

export default boot(async ({ app }) => {
  app.component("sortable-js", Sortable);
});

everything works perfectly. but when i enable the multiDrag, it throw below errors.. cannot figure out what's wrong with it

chunk-JHVJIRIH.js?v=46fdec4a:2622 Uncaught TypeError: Cannot read properties of undefined (reading 'options')
    at MultiDrag.drop3 [as drop] (chunk-JHVJIRIH.js?v=46fdec4a:2622:33)
    at chunk-GQT6ZSD2.js?v=46fdec4a:1541:51
    at Array.forEach (<anonymous>)
    at Function.pluginEvent (chunk-GQT6ZSD2.js?v=46fdec4a:1532:17)
    at pluginEvent3 (chunk-GQT6ZSD2.js?v=46fdec4a:1591:47)
    at Sortable._onDrop (chunk-GQT6ZSD2.js?v=46fdec4a:2364:9)
    at Sortable.handleEvent (chunk-GQT6ZSD2.js?v=46fdec4a:2495:18)
drop3 @ chunk-JHVJIRIH.js?v=46fdec4a:2622
(anonymous) @ chunk-GQT6ZSD2.js?v=46fdec4a:1541
pluginEvent @ chunk-GQT6ZSD2.js?v=46fdec4a:1532
pluginEvent3 @ chunk-GQT6ZSD2.js?v=46fdec4a:1591
_onDrop @ chunk-GQT6ZSD2.js?v=46fdec4a:2364
handleEvent @ chunk-GQT6ZSD2.js?v=46fdec4a:2495
Show 6 more frames
Show less
CurryAyam commented 9 months ago

please ignore this issues.. the vue draggable package is the one that cause the problem! uninstall vue draggable problem gone

groenroos commented 1 week ago

Ran into this same issue myself, essentially created because I have multiple sortable instances on the same page, and mounting the plugin will only work once; thus the secondary instances will not have multidrag initialised.

Wrapping it in a try/catch as per this thread helped us in our case.