Switch branches/tags
Nothing to show
Clone or download
Michael Michailidis
Latest commit 4708093 Oct 30, 2017



This is a simple implementation of a drag and rearrange collection view through its layout. It works for UICollectionViews with multiple sections.

Video Demo: Here

Tip: For drag and drop between multiple collection views look at the project here.

Quick Guide

  1. Add the KDRearrangeableCollectionViewFlowLayout.swift file to your project (it is the only file you need).
  2. Set the layout of your UICollectionView to be the one in the file above. This can be done either programmatically or through the Storyboard.

Storyboard Illustration

  1. Make the data source of your UICollectionView to be KDRearrangeableCollectionViewDelegate subclass and implement the one mandatory method there.
func moveDataItem(fromIndexPath : NSIndexPath, toIndexPath: NSIndexPath) -> Void

An example implementation for a multisectioned UICollectionView is here:

func moveDataItem(fromIndexPath : NSIndexPath, toIndexPath: NSIndexPath) -> Void {
    let name = self.data[fromIndexPath.section][fromIndexPath.item]
    self.data[toIndexPath.section].insert(name, atIndex: toIndexPath.item)

You can stop the dragging behaviour by setting the property

self.collectionViewRearrangeableLayout.draggable = true

You can constraint the axist of the drag through an enum

self.collectionViewRearrangeableLayout.axis = .Free
self.collectionViewRearrangeableLayout.axis = .X
self.collectionViewRearrangeableLayout.axis = .Y

You can prevent the of any cell by implementing:

func canMoveItem(at indexPath : IndexPath) -> Bool


Another class that comes with this package is KDRearrangeableCollectionViewCell. It is a subclass of UICollectionViewCell and it implements a boolean property called 'dragging'. If you choose to make the cells of your collection view a subclass of KDRearrangeableCollectionViewCell this property will be set upon the start and end of the dragging and by overriding it you can set the style of the snapshot image that will be dragged around.

This method will be called before the visual swap happens.

Make One Yourself

Please have a look at the article for a full explanation.