超实用! 父元素设置overflow:scroll时，巧妙解决vuedraggable组件拖拽出现的奇怪效果

前言
当使用 vuedraggable 在父元素设置了 overflow:scroll 时，你可能会遇到一些奇怪的效果，例如 item 闪烁、item 被父元素遮住时无法拖拽等。这些问题往往让人感到困惑和沮丧，但其实只要掌握了正确的解决方案，你就可以轻松地解决这些问题，让 vuedraggable 在你的项目中发挥出应有的作用。

问题分析
要解决这些问题，首先需要了解它们产生的原因。

1. item 闪烁
   当拖动 item 时，item 的最终位置不断发生变化，导致列表不断改变，从而导致 item 闪烁。

2. item 被父元素遮住时无法拖拽
   当 item 被父元素（设置了 overflow:scroll 的容器元素）遮住时，拖拽 item 时，跟随光标的 item 会被父元素遮挡，导致无法正常拖拽。

解决方案
针对上述问题，我们可以采取以下解决方案：

1. 使用 vuedraggable 的 captureSorting 属性
   vuedraggable 提供了 captureSorting 属性，它允许你将 item 的最终位置存储在父元素中，这样就不会导致列表不断改变，也就不会出现 item 闪烁的问题。

2. 使用 vuedraggable 的 scrollSensitivity 属性
   vuedraggable 提供了 scrollSensitivity 属性，它允许你设置拖拽 item 时触发的滚动灵敏度。将 scrollSensitivity 设置为一个较大的值，可以防止 item 被父元素遮挡时无法拖拽的问题。

具体示例

<template>
  <div class="container">
    <vuedraggable
      :list="items"
      @update="handleUpdate"
      captureSorting
      scrollSensitivity="100"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['item 1', 'item 2', 'item 3']
    }
  },
  methods: {
    handleUpdate(event) {
      // 更新 items 数组
    }
  }
}
</script>

总结
通过使用 vuedraggable 的 captureSorting 和 scrollSensitivity 属性，你可以轻松地解决父元素设置 overflow:scroll 时，vuedraggable 组件拖拽出现的奇怪效果。现在，你可以放心地在你的项目中使用 vuedraggable，而无需担心这些问题的影响。