When dragging from a table the event somehow mutates to a different row than the one I'm pulling

[34fame]

I am dragging from a table. Using onEnd or onMove I see the event initially showing the correct item; however, the event later changes to a different item.

The first screenshot is the console log for an onMove event. The "dragged" value indicates the correct row (id ending in "...CATW"). When I expand the event object, the "dragged" value is now a different row (id ending in "...X26G".

The second screenshot is the UI result. I started with 3 items in the table, WO-1, WO-2, and WO-3. I drug (dragged, drugged...) the WO-2 item from the table to the list below. In my onEnd code I grab values from the event. At first, it's the correct data and I'm able to correctly update the backend. However, at some point, the event shows a different item and I end up with remnants of WO-3 in the list and the table shows it's missing WO-3 instead of WO-2. If I leave the page and return, everything is correct because I was able to update the database with the correct information. While dragging the row, the correct data is displayed. Before dropping the row, the correct data is displayed in the target drop zone.

To make matters more strange, if I drag the last row of the table, everything works fine. If I drag anything but the bottom row, the event seems to consistently change to the row after the selected row.

Setting table rows (tbody) as draggable:

const tablePull = document.querySelector('#table tbody')
if (tablePull) {
   logger.info('tablePull', tablePull)
   Sortable.create(tablePull, {
      animation: 150,
      ghostClass: 'bg-light-blue-2',
      group: {
         name: 'shared',
         pull: 'clone',
         put: false,
      },
      sort: false,
      dragOverBubble: true,
      onMove(event) {
         logger.info('tablePull', 'onMove', event)
      },
      async onEnd(event) {
         logger.info('tablePull', 'onEnd', event)
         await handleMoveEvent(event)
      },
   })
}

Here is the handleMoveEvent function.

const handleMoveEvent = async (event) => {
   try {
      store.commit('app/setLoading', true)

      // Gets the text of the element we are dragging
      const innerText = event.item.innerText

      // Splits the innerText by tab and new line.  Depending on
      // the source element we drag, the innerText value is structured
      // differently.  Result is we just want the order's name.
      const hasTabs = innerText.includes('\t')
      const hasReturns = innerText.includes('\n')
      let innerTextArr = [innerText]
      if (hasTabs) {
         innerTextArr = innerTextArr[0].split('\t')
      }
      if (hasReturns) {
         innerTextArr = innerTextArr[0].split('\n')
      }
      const name = innerTextArr[0]

      // Gets this event's order item
      const eventOrder = store.getters['orders/items'].find(
         (f) => f.name === name
      )

      // Grabs the index of the element we are dragging.  This will be
      // needed to remove this item from the source after we move it.
      const startIndex = event.oldIndex

      // Grabs the index of the drop element.  This will be used to
      // insert the order into the appropriate index of the target.
      const targetIndex = event.newIndex

      // Grabs the id of the source element
      const from = event.from.id

      // Grabs the id of the target element
      const to = event.to.id

      if ((!from && !to) || (!from && to === 'well')) {
         // These two conditions are raised when the user
         // starts to drag and then decides not to move
         // after all.
         store.commit('app/setLoading', false)
      } else if (!from && to !== 'well') {
         await handleWellToOperator({ eventOrder, targetIndex, to })
      } else if (to === 'well') {
         await handleOperatorToWell({ eventOrder, from, startIndex })
      } else if (to === from) {
         await handleOperatorReorder({
            eventOrder,
            to,
            startIndex,
            targetIndex,
         })
      } else {
         await handleOperatorToOperator({
            eventOrder,
            to,
            from,
            targetIndex,
            startIndex,
         })
      }
   } catch (error) {
      console.error('DispatchPage', 'handleMoveEvent', error)
   } finally {
      store.commit('app/setLoading', false)
   }
}

...and finally the handleWellToOperator that is called by handleMoveEvent:

const handleWellToOperator = async ({ eventOrder, targetIndex, to }) => {
   // Get the activeDispatch index for this event's dispatch
   const activeDispatchIdx = activeDispatch.findIndex(
      (f) => f.operatorId === to
   )

   // Get the stops for this event's dispatch
   const stops = activeDispatch[activeDispatchIdx].stops

   // Get stop index of target to insert this event's dispatch
   let insertIndex =
      targetIndex === 0
         ? 1
         : targetIndex === stops.length
         ? stops.length - 1
         : targetIndex

   // Insert this event's dispatch into the operator's activeDispatch
   activeDispatch[activeDispatchIdx].stops.splice(insertIndex, 0, {
      ...eventOrder,
      label: eventOrder.name,
   })

   // Set the status for this event's order to 'Assigned'.
   // This will remove the order from the well due to it's status
   await order.update({ id: eventOrder.id, status: 'Assigned' })

   // This removes the ugly stub created in the drop zone of the
   // target operator's card.
   const elInterval = setInterval(() => {
      if (document.getElementById(eventOrder.id)) {
         clearInterval(elInterval)

         const el = document.getElementById(eventOrder.id)
         el.remove()
         console.groupEnd()
      }
   }, 500)
}

[34fame]

I was able to reproduce this in a small-scale example on StackBlitz. It happens when you drag from the table to an operator and when dragging from an operator to another operator. https://stackblitz.com/edit/vue-dqswbz