Elijah

Ugh, I was looking in the wrong spot. They have a new method (documented separately from the other methods) that has all the data needed.

Tutorial is fine as is with one edit:

From:
<draggable v-model="list.cards" group='cards' class="dragArea" @end="cardMoved">

To:
<draggable v-model="list.cards" group='cards' class="dragArea" @change="cardMoved">

Unfortunately the new response doesn't return the element that was moved, just the indexes.

The to and from attributes that are returned are HTML / DOM elements, not the javascript objects, so I can't find the ids needed.

CustomEvent {isTrusted: false, to: div.dragArea, from: div.dragArea, item: div.card.card-body.mb-3, clone: div.card.card-body.mb-3, …}
        bubbles: true
        cancelBubble: false
        cancelable: true
        clone: div.card.card-body.mb-3
        composed: false
        currentTarget: null
        defaultPrevented: false
        detail: null
        eventPhase: 0
        from: div.dragArea
        isTrusted: false
        item: div.card.card-body.mb-3
        newDraggableIndex: 0
        newIndex: 0
        oldDraggableIndex: 0
        oldIndex: 0
        originalEvent: DragEvent {isTrusted: true, dataTransfer: DataTransfer, screenX: 695, screenY: 335, clientX: 695, …}
        path: (8) [div.dragArea, div.col-3, div.row.dragArea, div.container.mt-5, body, html, document, Window]
        pullMode: true
        returnValue: true
        srcElement: div.dragArea
        target: div.dragArea
        timeStamp: 8222.279999987222
        to: div.dragArea
        type: "end"
        __proto__: CustomEvent

They updated the draggable package and sadly this no longer works. The end method is completely different response now. I spent a few hours trying to get the JS IDs for the card and list but very frustrating :(