Incorrect Evaluation of 'addedIndex'

[ProShi]

I am encountering an issue while utilizing this drag and drop library in my Vue demo project. I have observed that the 'addedIndex' parameter is evaluating incorrectly in certain cases.

Here is the code snippet

<template>
<div class="flex-container">
  <div class="container">
    <Container
      behaviour="copy"
      group-name="1"           
      :get-child-payload="getChildPayload"
      tag='div'
      orientation="vertical"
      drag-handle-selector="div"
      class="inner-container"
    >
      <Draggable
      v-for="(item, idx) in items"
      :key="idx"
      tag='div'      
      >
          <div class="item">
            {{item.text}}
          </div>
      </Draggable>
    </Container>
  </div>

  <div class="container" >
    <Container
      behaviour="contain"
      group-name="1"
      @drop="onDrop($event)"
      tag='div'
      drag-handle-selector="div"
      orientation="vertical"
      class="inner-container"
    >
      <Draggable
      v-for="(item, idx) in items2"
      :key="idx"
      :tag="{ value: 'div' }"
      >
        <div class="item">
          <span>
            {{item.text}}                     
          </span>
          <button
            @click.stop="removeItem(idx)"
            style="padding: 8px;"
            >
             delete
          </button>
        </div>
      </Draggable>
    </Container>
  </div>
</div>
</template>

<script setup>
import { Draggable, Container } from 'vue3-smooth-dnd';
import { ref } from 'vue'

const items = ref([
  {
    id: 1,
    text: `Item 1`,
  },
  {
    id: 2,
    text: `Item 2`,
  },
  {
    id: 3,
    text: `Item 3`,
  },
  {
    id: 4,
    text: `Item 4`,
  },

])

const items2 = ref([]);

const getChildPayload = (index) => {
  const item = items.value[index];
  let payload = {
    id: item.id,
    text: `${item.text} on container 2`,
  }

  return payload;
}

const onDrop = (dragResult) => {
  const { removedIndex, addedIndex, payload } = dragResult
  console.log('Added index = ', addedIndex);// for logging the addedIndex
  if (removedIndex === null && addedIndex === null) return items2.value

  const result = [...items2.value]
  let itemToAdd = payload

  if (removedIndex !== null) {
    itemToAdd = result.splice(removedIndex, 1)[0]
  }

  if (addedIndex !== null) {
      result.splice(addedIndex, 0, itemToAdd)

  }
  items2.value = result;
}

const removeItem = (index) => {
  items2.value.splice(index, 1)
}
</script>

<style scoped>
.flex-container{
  display: flex;
}
.container{
  background-color: grey;
  width: 600px;
  height: 600px;
  margin:auto 16px;
}

.inner-container{
  background-color: red;
}

.item{
  margin:4px;
  padding: 8px;
  background-color: white;
  text-align: center;
}

</style>

Steps to Reproduce:

• Drag more than two elements from container 1 to container 2.

• Observe the logged 'addedIndex', initial behavior is as expected .

• 

• Delete all items from container 2.

• 

• Add one element from container 1 to container 2 again.

• Notice that the 'addedIndex' logged in the console is being recorded as '1' instead of '0' for the first element.

• 

• Additionally, the 'addedIndex' is observed as '2' for the first element if more than four items (i think) were initially added, deleted, and then re-added.