Disable sort

[jb-alvarado]

Hello, thanks for your nice module!

Is it possible to disable sorting? I need this because I have two lists. In one list, I want to disable sorting so that I can only drag items from that list to the second list. In the second list, sorting is fine.

[mfuu]

@jb-alvarado Supported now. Please update your package version. Usage:

new Sortable(el, {
  ...,
  sortable: true,
})

[jb-alvarado]

Thank you @mfuu! Now it works! Also the other issue disappear. Now I only notice:

Uncaught (in promise) Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function. runtime-core.esm-bundler.js:257:6
    NuxtJS 129
        logError
        handleError
        checkRecursiveUpdates
        flushPostFlushCbs
        flushJobs
        ...
        flushJobs
    (Async: promise callback)
        queueFlush
        queueJob
        effect
        resetScheduling
        trigger
        set
        set value
        set
        2
        callWithErrorHandling
        callWithAsyncErrorHandling
        emit
        createSetupContext/get emit/<
        onDrop
        dispatchEvent
        onDrop
        onDrop
        T2
        _onEnd
        _onDrop
    (Async: EventListener.handleEvent)
        c2
        _onDrag
    (Async: EventListener.handleEvent)
        c2

But I have no idea from where it comes from. When I use sortablejs-vue3 in the same project I have not notice this.

[mfuu]

@jb-alvarado If you use v-model, you don't need to do the assignment on drop

[jb-alvarado]

I need that event to recalculate the start time from each clip, when the oder has changed. But even when I remove it temporary this error message came.

[mfuu]

@jb-alvarado Please check if the dataKey is unique

[jb-alvarado]

Yes you are right! That was the problem. I needed to generate a new unique dataKey on add event. But because I process the target list on drop event I had to deep clone the list also.

Sorry for taking your time!

[jb-alvarado]

Sorry to bother you again @mfuu. Now when I use :sortable="false" on one list and I drag an item to a second list, and drag again to the source list (without releasing the mouse), I get this error trace, and the script crashes:

Uncaught TypeError: L is null
    NuxtJS 48
18 virtual-drag-list.min.js:12:17866
    NuxtJS 48
        _onInsert
        _onMove
        _nearestSortable
    (Async: EventListener.handleEvent)
        c2
        _onStart
        _onDrag
    (Async: EventListener.handleEvent)
        c2
        ot
        init
        v
        N
        setup
        createHook
        callWithErrorHandling
        callWithAsyncErrorHandling
        __weh
        flushPostFlushCbs
        flushJobs
    (Async: promise callback)
        queueFlush
        queuePostFlushCb
        resolve
        resolve
        registerDep
    (Async: promise callback)
        registerDep
        mountComponent
        processComponent
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        registerDep
    (Async: promise callback)
        registerDep
        mountComponent
        processComponent
        patch
        componentUpdateFn
        run
        update
        setupRenderEffect
        mountComponent
        processComponent
        patch
        mountSuspense
        process
        patch
        componentUpdateFn
        run

[mfuu]

@jb-alvarado sorry for late reply. Please update to the latest version to see if it has been solved.

[jb-alvarado]

Thank you @mfuu, I think now it works correctly!