search

bevacqua / angularjs-dragula

:ok_hand: Drag and drop so simple it hurts
https://bevacqua.github.io/angularjs-dragula
MIT License
509 stars 110 forks source link

Any way to drag and drop nested Firebase objects instead of arrays? #85

Closed ibrychgo closed 7 years ago

ibrychgo commented 8 years ago

I'm displaying a number of columns of cards, all children of a synchronized firebase "client" object.

I'd like to be able to drag/drop sort the cards within and between columns.

Of course, because these are nested object, not an array, I'm getting an error on the drop-model right out of the gate.

My column directive: 

 <div class="profile-item-container-items" dragula='"details-bag"' dragula-scope="$parent" dragula-model="panel.details">
        <profile-detail-item ng-repeat="detail in panel.details track by $index"  />
    </div>

$scope.$on( 'details-bag', function( el, target, source ) { $log.debug('Drag drop-model event:'); $log.debug(el); $log.debug(target); $log.debug(source); });

The error I receive when triggering drag events:

TypeError: sourceModel.splice is not a function

Like I said, pretty sure this is to be expected because I'm giving it a model of nested objects instead of arrays...but I'm hoping there's a way around it that isn't too much of a nightmare? Or should it work and I'm just missing something?

glauberramos commented 7 years ago

@ibrychgo did you find a solution to that?

ibrychgo commented 7 years ago

Ah. Yes, in the end. I simply passed the object to the toArray filter:

ng-repeat="detail in panel.details | toArray | track by detail.uid"

You can read more about it here: https://github.com/petebacondarwin/angular-toArrayFilter

I recall having issues with using $index to track so I'm tracking by our unique ID. Not sure if that would be necessary in all situations or not.