henrytkirk / htkdraganddropcollectionviewlayout

UICollectionViewLayout subclass that works together with a custom UICollectionViewCell to provide drag and drop for a UICollectionView. Works just like UITableView drag and drop. What's unique about this approach is that it does not need to create a "ghost" or "dummy" cell to provide the drag and drop functionality.

HTKDragAndDropCollectionViewLayout

Custom UICollectionViewLayout that works together with a custom UICollectionViewCell to provide drag and drop for a UICollectionView. Works just like UITableView drag and drop. What's unique about this approach is that it does not need to create a "ghost" or "dummy" cell to provide the drag and drop functionality. I believe this method is simpler and less complex for the majority of use cases.

Adding to your project:

Cocoapods

CocoaPods is the recommended way to add HTKDragAndDropCollectionViewLayout to your project.

1. Add a pod entry for HTKDragAndDropCollectionViewLayout to your Podfile pod 'HTKDragAndDropCollectionViewLayout'
2. Install the pod(s) by running pod install.
3. Subclass HTKDragAndDropCollectionViewController.
4. Setup HTKDragAndDropCollectionViewLayout properties (itemSize, lineSpacing, etc).
5. Subclass and use HTKDraggableCollectionViewCell which implements the gestures for dragging.
6. Implement - (void)userDidEndDraggingCell:(UICollectionViewCell *)cell and if the HTKDragAndDropCollectionViewLayout finalIndexPath is not nil, insert the draggedIndexPath into the finalIndexPath's position. See example in project.

Sample video:

Screen shot:

Change log:

v0.0.1: Initial project commit v0.1.0 - v0.1.2: Bug fixes - Don't use this version, I broke it. v0.1.3: Current stable version. This version is greatly enhanced over the original version. It now supports rotation, and inserting of items. Currently inserting only works to the "end" of the data source. So, if you have 10 items in your collectionView and wish to insert, adding the item to indexPath 0,10 will work fine, while adding to indexPath 0,5 would not. This should be corrected pretty soon.

Questions? Email: [email protected] or Web: http://www.henrytkirk.info

htkdraganddropcollectionviewlayout's Issues

IndexPath not exchanged when cells exchanged

I found when the the pan gesture is end, the delegate's userDidEndDraggingCell: will be called, and the resetDragging method too, but it doesn't exchange itemDictionary(the layout property) buckets.
I think it's a bug. when i want to exchange my datasource in userDidEndDraggingCell: callback method, the indexPath can't mapped to my datasource index correctly.

Horizontal drag

Does it support dragging of items horizontally?

xcode crash when call [self.collectionView deleteItemsAtIndexPaths:@[[NSIndexPath indexPathForItem:count inSection:0]]];

error：*** Assertion failure in -[UICollectionView _endItemAnimationsWithInvalidationContext:tentativelyForReordering:], /SourceCache/UIKit_Sim/UIKit-3347.44/UICollectionView.m:4072

Change select and drag timing?

How can I change the time in order to pick for drag?

demo not working

Thank you for amazing component but no drag and drop functionality working...

Doesn't perform cell dragging properly on scrollview events

For example, I want to place the first element on the 10th place. So I need to make long press gesture on it and scroll to the appropriate place. But it seems it allows to move the cell to nearby places only

Minimum item spacing calculation is incorrect.

self.minimumInteritemSpacing calculation is incorrect. Should return:

actualItemSpacing / self.numberOfItemsPerRow;

instead of just actualItemSpacing.

line 204.

userDidEndDraggingCell - update datasource not working

Sample application have a bug

• (void)userDidEndDraggingCell:(UICollectionViewCell *)cell {
  [super userDidEndDraggingCell:cell];

  HTKDragAndDropCollectionViewLayout *flowLayout = (HTKDragAndDropCollectionViewLayout *)self.collectionView.collectionViewLayout;
  NSLog(@"%s %@",PRETTY_FUNCTION, self.collectionView.collectionViewLayout);//self.collectionView.collectionViewLayout = NIL!!!!
  // Save our dragging changes if needed
  if (flowLayout.finalIndexPath != nil) {
  // Update datasource
  NSObject *objectToMove = [self.dataArray objectAtIndex:flowLayout.draggedIndexPath.row];
  [self.dataArray removeObjectAtIndex:flowLayout.draggedIndexPath.row];
  [self.dataArray insertObject:objectToMove atIndex:flowLayout.finalIndexPath.row];
  }
  }

LOG:
start drag first item
-[HTKDragAndDropCollectionViewLayout prepareLayout] set finalIndexPath = nil and draggedIndexPath = nil
dragging over item
-[HTKDragAndDropCollectionViewLayout insertDraggedItemAtIndexPath:] set OK finalIndexPath.row = 0
release touch
-[HTKDragAndDropCollectionViewLayout prepareLayout] set finalIndexPath = nil and draggedIndexPath = nil
-[HTKDragAndDropCollectionViewLayout resetDragging] set finalIndexPath = nil and draggedIndexPath = nil
-[HTKSampleCollectionViewController userDidEndDraggingCell:]
We never go in to if for updating datasource

Incorrect spacing between cells

You need to change line 250 in HTKDragAndDropCollectionViewLayout.m to return actualItemSpacing / (self.numberOfItemsPerRow - 1);

Because you have only two spaces between three cells, you need to subtract one to space them evenly.

Dealing with bounds size change (e.g. interface orientation change)

with such setup

HTKDragAndDropCollectionViewLayout *flowLayout = (HTKDragAndDropCollectionViewLayout *)self.collectionView.collectionViewLayout;
    CGFloat itemWidth = CGRectGetWidth(self.collectionView.bounds) / 3;
    flowLayout.itemSize = CGSizeMake(itemWidth, itemWidth);
    flowLayout.minimumInteritemSpacing = 0;
    flowLayout.lineSpacing = 0;
    flowLayout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);

after performing interface rotation and thus changing collectionView width from 320 to 568 i expect items to "reflow" and form less rows with 5 items in a row instead of 3.
Is it possible to achieve it manually with the existing API?
Should it be done automatically?

i make it more flexible...

hi, i test this layout code today, and i found the selected cell need move very near to the target cell for exchanging position, so i modify two method to making it more flexible(marked with // ---->), can you check it out?

- (void)exchangeItemsIfNeeded {
    // Exchange objects if we're touching.
    NSIndexPath *intersectPath = [self indexPathBelowDraggedItemAtPoint:self.draggedCellCenter];
    UICollectionViewLayoutAttributes *attributes = self.itemDictionary[intersectPath];
    if (!attributes) return;  // add it for skip attributes == nil

    // ---->use attributes.frame not centerBox
    // Create a "hit area" that's 20 pt over the center of the intersected cell center
//    CGRect centerBox = CGRectMake(attributes.center.x - HTKDragAndDropCenterTriggerOffset, attributes.center.y - HTKDragAndDropCenterTriggerOffset, HTKDragAndDropCenterTriggerOffset * 5, HTKDragAndDropCenterTriggerOffset * 5);  

    // Determine if we need to move items around
    if (intersectPath != nil && ![intersectPath isEqual:self.draggedIndexPath] && CGRectContainsPoint(attributes.frame, self.draggedCellCenter)) {
        [self insertDraggedItemAtIndexPath:intersectPath];
    }
}

- (NSIndexPath *)indexPathBelowDraggedItemAtPoint:(CGPoint)point {

    __block NSIndexPath *indexPathBelow = nil;
    __weak HTKDragAndDropCollectionViewLayout *weakSelf = self;

    [self.collectionView.indexPathsForVisibleItems enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
        NSIndexPath *indexPath = (NSIndexPath *)obj;

        // Skip our dragged cell
        if ([self.draggedIndexPath isEqual:indexPath]) {
            return;
        }
        UICollectionViewLayoutAttributes *attribute = weakSelf.itemDictionary[indexPath];

        // ---->use attributes.frame not centerBox
        // Create a "hit area" that's 20 pt over the center of the testing cell
//        CGRect centerBox = CGRectMake(attribute.center.x - HTKDragAndDropCenterTriggerOffset, attribute.center.y - HTKDragAndDropCenterTriggerOffset, attribute.frame.size.width/2, attribute.frame.size.height/2); 
        if (CGRectContainsPoint(attribute.frame, weakSelf.draggedCellCenter)) {
            indexPathBelow = indexPath;
            *stop = YES;
        }
    }];

    return indexPathBelow;
}

Does this lib work with storyboards?

I can't dequeue a cell from a storyboard setup and registering cell during configuration does not seem to work either.

Row calculation is incorrect

Doesn't account for partial rows. Oops.

Incorrect final index when dragging cell to it's original position

Hi, when you drag a cell somewhere and then decide to drag it back (not move it), meaning you'll drop the cell at the spot where you started dragging it in one go, the finalindex will point to the last nearest position instead of on the original one.

To reveal this bug in your demo project reload collectionView data in userDidEndDraggingCell. The data underlying the collectionView isn't being changed properly.

refresh bug

refresh later, The data nothing change

scrollDirection

How to set scrolldirection horizontal. There is no property defined in HTKDragAndDropCollectionViewLayout to set scroll direction.

Can't add header and footer?

When Reload collection view cell are overlaping.

I have one table-view and i am adding the object to the Array form that table view and When i trying to reload collection view data. the cells are overlapping each other.
please help me.

Bugs when items.count%2 == 1

when the items.count %2==1, the collectionView will appear with an error,the last row of the items will not be show.
Solve method:
In file HTKDragAndDropCollectionViewLayout.m,Method: - (CGSize)collectionViewContentSize add codes:

if (totalItems%2 == 1) {
totalItems=totalItems+1;
}

Final Codes:

- (CGSize)collectionViewContentSize {
CGFloat collectionViewWidth = CGRectGetWidth(self.collectionView.bounds);
// Determine number of sections
NSInteger totalItems = 0;
for (NSInteger i = 0; i < [self.collectionView numberOfSections]; i++) {
totalItems += [self.collectionView numberOfItemsInSection:i];
}
//When the totalItems%2 == 1,do this.
if (totalItems%2 == 1) {
totalItems=totalItems+1;
}
// Determine how many rows we will have

NSInteger rows = totalItems / self.numberOfItemsPerRow;

 // Determine height of collectionView

CGFloat height = (rows * (self.itemSize.height + self.lineSpacing)) + self.sectionInset.top + self.sectionInset.bottom;

`return CGSizeMake(collectionViewWidth, height);`

}

about delete

deleteItemsAtIndexPaths，crash