UICollectionView 'interactive movement' is not letting to drop the cell as a last cell in the target section - drag-and-drop

Question

I am using UICollectionView with the minimum development target of iOS9 and found that can support drag and drop in terms of interactive movement. Everything works fine but the dropping the cell as the last cell in the target section is not working.
NB: I don't want the iOS11 drag and drop solution, because my App targets iOS9 onwards. Creating a dummy cell at the end of every section is not a straight forward solution.
Please see the image to get the problem visually.
Thanks in advance.

Answer 1

I have encountered the same issue, and finally managed to get it done. I used Apple documentation and multiple blog post about UICollectionView to build a fully functional Drag'N Drop feature between sections and even on invalid indexPaths.
Implementing default Drag'N Drop
First of all you have to disable the automatic Drag'N Drop feature offered by Apple, because you will be using your own GestureRecognizer.
So, add this in your viewDidLoad :
// deactivate default gesture recognizer for drag'n drop
self.installsStandardGestureForInteractiveMovement = NO;
Add a longPressGestureRecognizer to your collectionView, add the UIGestureRecognizerDelegate to your viewController protocols, and set the delegate in your viewDidLoad :
_longPressGestureRecognizer.delegate = self;
You now have to implement the longPressGestureRecognizer action :
// static variables to manage drag'n drop on invalid spaces
static NSIndexPath * longPressIndexPath = nil;
static CGPoint longPressLocation = (CGPoint) {0, 0};
- (IBAction)longPress:(UILongPressGestureRecognizer *)sender {
#autoreleasepool {
static BOOL isDragNDropping = NO;
longPressLocation = [sender locationInView:self.collectionView];
longPressIndexPath = [self.collectionView indexPathForItemAtPoint:longPressLocation];
// get the cell at indexPath (the one you long pressed)
UICollectionViewCell* cell = nil;
if (sender.state == UIGestureRecognizerStateChanged) {
NSLog(#"%s : STATE CHANGED", __FUNCTION__);
// Do stuff with cell
// Update the cell movement if the longPress location changes
if (isDragNDropping) {
[self.collectionView updateInteractiveMovementTargetPosition:longPressLocation];
} else {
// It's the first longPress movement, start the drag'n drop
if (longPressIndexPath) {
[self.collectionView beginInteractiveMovementForItemAtIndexPath:longPressIndexPath];
isDragNDropping = YES;
}
}
return;
}
if (sender.state == UIGestureRecognizerStateRecognized) {
NSLog(#"%s : STATE RECOGNIZED", __FUNCTION__);
// do stuff with the cell
// We were long pressing on a cell
if (isDragNDropping) {
[self.collectionView endInteractiveMovement];
}
isDragNDropping = NO;
return;
}
if (sender.state == UIGestureRecognizerStateBegan) {
NSLog(#"%s : STATE BEGAN", __FUNCTION__);
// do stuff with the newly selected cell
if (longPressIndexPath) {
cell = [self.collectionView cellForItemAtIndexPath: longPressIndexPath];
// You can add custom animations on the cell
[UIView animateWithDuration:0.35f animations:^{
[cell setTransform:CGAffineTransformMakeScale(1.2f, 1.2f)];
cell.layer.shadowColor = [UIColor blackColor].CGColor;
cell.layer.shadowRadius = 6.f;
cell.layer.shadowOpacity = 0.6f;
} completion:^(BOOL finished) {
}];
}
isDragNDropping = NO;
return;
}
}
}
Basically, at this point you have done the default Drag'N Drop that Apple was doing.
Bypassing the invalid indexPaths
The main thing is to implement this callback :
(NSIndexPath *)collectionView:(UICollectionView *)collectionView targetIndexPathForMoveFromItemAtIndexPath:(NSIndexPath *)originalIndexPath toProposedIndexPath:(NSIndexPath *)proposedIndexPath
It allows you to bypass the proposed indexPath to one of your choice.
You also have to implement this to keep track of the reordering :
(In case you are using CoreData and NSFetchedResultsController as your DataSource, you need to use a ranking to sort your items and this rank would have to be changed here)
-(void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
Now the main problem is that you want to insert in an invalid indexPath (since it does not exists yet).
To workaround that, you have to keep a record of the longPressGestureRecognizer location and indexPath. I have declared these 2 variables as static but ViewController's property would do as well.
The key here is to generate virtual indexPaths at your longPressGestureRecognizerlocation instead of the proposed indexPath like this :
- (NSIndexPath *)collectionView:(UICollectionView *)collectionView targetIndexPathForMoveFromItemAtIndexPath:(NSIndexPath *)originalIndexPath toProposedIndexPath:(NSIndexPath *)proposedIndexPath
{
NSLog(#"%s", __FUNCTION__);
NSLog(#"original idxPath : %li - %li | proposed idxPath : %li - %li", originalIndexPath.section, originalIndexPath.item, proposedIndexPath.section, proposedIndexPath.item);
// The longPressIndexPath is valid, we are drag'n dropping on an valid location, keep the proposedIndexPath
if (longPressIndexPath != nil) {
return proposedIndexPath;
}
// The longPressIndexPath is nil, which means we are drag'n dropping on a new location (at the end of a section in most cases)
if (longPressIndexPath == nil) {
NSLog(#"%s virtualIndexPath", __FUNCTION__);
// This part is not actually needed,
// I have added a way to accept drops on header/footer, and add the item to the corresponding section
// Build an set with each sectionIndexPaths
NSMutableSet<NSIndexPath*>* visiblesSectionIndexPaths = [NSMutableSet setWithArray:[self.collectionView indexPathsForVisibleSupplementaryElementsOfKind:UICollectionElementKindSectionHeader]];
[visiblesSectionIndexPaths addObjectsFromArray:[self.collectionView indexPathsForVisibleSupplementaryElementsOfKind:UICollectionElementKindSectionFooter]];
// Find the section containing the gesture location
// Custom method that return the index of the section containing the given point, -1 if no section were found
NSInteger sectionIndex = [self sectionIndexContainingPoint:longPressLocation];
if (sectionIndex > -1) {
// If so, generate a virtual indexPath, where we can drop this item
// The management of the indexPath in the dataSource will happen in the moveItemAtIndexPath callback
// We return a new indexPath
int itemIndex = [self.collectionView numberOfItemsInSection:sectionIndex];
if (itemIndex<0) {
itemIndex=0;
}
// Generate a virtual indexPath
NSIndexPath * virtualIndexPath;
virtualIndexPath = [NSIndexPath indexPathForItem:itemIndex inSection:sectionIndex];
NSLog(#"virtual idxPath : %li - %li", virtualIndexPath.section, virtualIndexPath.item);
return virtualIndexPath;
}
return proposedIndexPath;
}
}
And finally, you implement the moveItemAtIndexPath method
You have to change the section your item belongs to in your backing data container, and call a reloadDatato update your collectionView. This part is entirely dependent on your dataSource, I have done it myself with CoreData and NSFetchedResultsController.
Hope this will help.
N.B.: this is mostly chunks of code extracted from my own implementation, I'm not sure it will work as is, but you have the keys to make it roll.