1

I was curious what the appropriate way is to animate and swap elements using angular. I have a two-dimensional array that has a nested ng-repeat to create the table. My end goal is to have two elements in the table swap places using an animation, so basically just hover over to eachother's positions.

I have this function that swaps the position of two jquery elements, but it doesn't update the array and ultimately the angular array will no longer be synced with what is displayed. I also find that the animation hangs a little when moving elements between rows whereas columns are smooth. ie. [0][0] -> [0][1] is smooth and [0][0] -> [1][0] hangs

jQuery.fn.swapWith = function (to, callback) {    
        animating = true;
        thisPos = this.position();
        toPos = to.position();
        $.when(this.animate({
            top: toPos.top,
            left: toPos.left
        }, 300),
            to.animate({
                top: thisPos.top,
                left: thisPos.left
            }, 300)).done(function () {
                animating = false;
                if (callback) {
                    callback();
                }
            });


    };

I've also found this codepen which is pretty nice, but also not quite what I'm looking for. http://codepen.io/daleyjem/pen/xbZYpY Is there a standard way of handling something like this in angular?

To put in more simple terms: If I want array[0][0] to swap positions with array[0][1] and have the $scope object update appropriately, how should I do it? Same with array[0][0] to array[1][0]?

EDIT: I should mention, I have noticed that simply setting the elements equal to eachother will update the table appropriately. The problem being the lack of animation. example:

a = [0][1]
b = [0][0]

[0][1] = b
[0][0] = a
ReddShepherd
  • 467
  • 1
  • 11
  • 24
  • Possibly http://stackoverflow.com/questions/23985029/angularjs-swap-two-items-in-ng-repeater-with-animation might help? Or else http://stackoverflow.com/questions/18523531/list-reorder-animation-with-angularjs – Duncan Aug 08 '16 at 16:08
  • Thank you for the response, I've seen both of those and that second one is actually that codepen I linked. I haven't actually been able to get the first one to work, but I could spend a little more time looking into that. The codepen I linked actually got me close, but the animation lags. and the $scope member doesn't match the grid. – ReddShepherd Aug 08 '16 at 18:31

0 Answers0