vue-draggableでドラッグ中に位置がずれる問題の解消方法

結論

draggしたい要素を子コンポーネントに分割しているようなケースで、子コンポーネント内部に非表示要素などが含まれているとその高さ分ずれるっぽい。

問題

vue-draggableでドラッグ中に、カーソルの脇に移動しているオブジェクトが表示されず、カーソルとズレた位置にオブジェクトが表示されてしまっていた。

追記：画面サイズがある程度大きくなるとずれる。おそらくレスポンシブ関連が影響している。この点は未解決（調査中）

解決方法

draggable属性を使用する

        <draggable
          v-model="items"
          handle=".item-handle"
          @end="updateItemSort"
          draggable=".item" //drag対象を見つけるクラスを指定
        >
          <v-card
            v-for="item in items"
            :key="item.id"
            flat
            rounded="lg"
            outlined
            class="mb-5 item"　//drag対象であることの明示としてクラス指定
          >
            <ChildComponent
              :item="item"
            />
          </v-card>
        </draggable>