Template.postsList.onRendered(function () { this.find('.wrapper')._uihooks = { moveElement: function (node, next) { var $node = $(node); var $next = $(next); var oldTop = $node.offset().top; var height = $node.outerHeight(true); var $inBetween = $next.nextUntil(node); // This was in the wrong direction, try the other way.. if ($inBetween.length === 0) { $inBetween = $node.nextUntil(next); } // Now put node into place $node.insertBefore(next); // Measure new top. var newTop = $node.offset().top; // Move node "back" to where it was before. $node .removeClass('animate') .css('top', oldTop - newTop); // Push every other element down (or up) to put them back. $inBetween .removeClass('animate') .css('top', oldTop < newTop ? height : -1 * height); // Force a redraw. $node.offset(); // Reset everything to 0, animated. $node.addClass('animate').css('top', 0); $inBetween.addClass('animate').css('top', 0); } }; });