vuedraggable 拖出父元素范围，回弹到原来位置

在使用 vuedraggable 拖拽时，可以通过设置 `containment` 属性来限制拖拽范围。但是如果需要拖拽到父元素外面，然后回弹到原来的位置，可以通过以下步骤实现：

1. 监听 `start` 事件，在拖拽开始时记录原来的位置。

2. 监听 `end` 事件，在拖拽结束时判断是否拖拽到了父元素外面。

3. 如果拖拽到了父元素外面，使用动画将元素移动到原来的位置。

下面是一个示例代码：

<template>
  <div ref="parent" class="parent">
    <draggable v-model="list" :options="{ containment: '.parent' }" @start="onDragStart" @end="onDragEnd">
      <div v-for="item in list" :key="item.id" class="item">{{ item.text }}</div>
    </draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      originalPosition: null
    }
  },
  methods: {
    onDragStart(event) {
      this.originalPosition = {
        x: event.clientX,
        y: event.clientY
      }
    },
    onDragEnd(event) {
      const parentRect = this.$refs.parent.getBoundingClientRect()
      const itemRect = event.target.getBoundingClientRect()

      if (itemRect.right < parentRect.left || itemRect.left > parentRect.right || itemRect.bottom < parentRect.top || itemRect.top > parentRect.bottom) {
        // 如果拖拽到父元素外面，使用动画将元素移动到原来的位置
        const dx = this.originalPosition.x - event.clientX
        const dy = this.originalPosition.y - event.clientY
        event.target.style.transition = 'transform 0.2s'
        event.target.style.transform = `translate(${dx}px, ${dy}px)`
        setTimeout(() => {
          event.target.style.transition = ''
          event.target.style.transform = ''
        }, 200)
      }
    }
  }
}
</script>

<style>
.parent {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}
.item {
  width: 100%;
  height: 50px;
  background-color: #eee;
  margin-bottom: 10px;
  box-sizing: border-box;
  cursor: move;
}
</style>