はじめに

UICollectionViewDragDelegate を使って、CollectionViewCell の上の画像を Drag したときに、画像の選択範囲がズレるという問題に直面しました。

事象は実際に画像を見てもらったほうが早いので、修正前と修正後の画像をご確認下さい。

修正前

選択した画像の、左と上に余白が生まれている。（正確には選択範囲の始点がズレる）

修正後

原因

CollectionViewCell を作成するとデフォルト状態で、CollectionViewCell の中に ContentView が作成されます。 この上に画像を配置すると、 CollectionViewCell > ContentView > ImageView のような形になります。

CollectionViewCell を拡大

確かに、ContentView とその上に乗っかっている要素の間には隙間が作られます。(この隙間を埋める方法はわかっていません)

Drag 開始時の選択範囲は、今表示している画像ではなく、CollectionViewCell の左上 座標(0,0)を始点にしているため、選択範囲がズレる問題が発生します。

対処方法

CollectionViewCell に直接 ImageView を乗せることで解決できます。

では、Storyboard のどこで ContentView を削るかというと、

CollectionViewCell を見ると Size: Automatic となっているので、

↓ 　Size: Custom に変更して、 Content View のチェックボックスを外します。

参考

Drag and Drop with Collection and Table View

↑ こちらのサンプルは本当に助けられました