Separated Packery init layout.

res/app/components/stf/angular-packery/angular-packery-directive.js

@@ -5,25 +5,29 @@ module.exports = function angularPackeryDirective(PackeryService, DraggabillySer
     restrict: 'AE',
     link: function (scope, element, attrs) {
       var container = element[0]
-      var pckry
       var parsedAttrs = $parse(attrs.angularPackery)()
       if (typeof parsedAttrs !== 'object') {
         parsedAttrs = {}
       }
 
       var options = angular.extend({
+        isInitLayout: false,
         itemSelector: '.packery-item',
         columnWidth: '.packery-item',
         transitionDuration: '300ms'
       }, parsedAttrs)
 
+      var pckry = new PackeryService(container, options)
+      pckry.on('layoutComplete', onLayoutComplete)
+      pckry.bindResize()
+      bindDraggable()
+
       $timeout(function () {
-        pckry = new PackeryService(container, options)
-        pckry.on('layoutComplete', onLayoutComplete)
         pckry.layout()
-        pckry.bindResize()
-        bindDraggable()
-      }, 50)
+      }, 0)
+      $timeout(function () {
+        pckry.layout()
+      }, 100)
 
       function bindDraggable() {
         if (options.draggable) {
@@ -51,10 +55,9 @@ module.exports = function angularPackeryDirective(PackeryService, DraggabillySer
       scope.$on('panelsResized', _.throttle(onPanelsResized, 300))
 
       scope.$on('$destroy', function () {
-        if (pckry) {
-          pckry.unbindResize()
-          pckry.off('layoutComplete', onLayoutComplete)
-        }
+        pckry.unbindResize()
+        pckry.off('layoutComplete', onLayoutComplete)
+        pckry.destroy()
       })
     }
   }

res/app/components/stf/angular-packery/angular-packery.css

@@ -13,6 +13,12 @@ div[angular-packery] {
   overflow-x: hidden;
 }
 
+div[angular-packery]:after {
+  content: ' ';
+  display: block;
+  clear: both;
+}
+
 .col-md-4-x.packery-item {
   width: 33.33333333333333%;
 }
@@ -34,3 +40,10 @@ div[angular-packery] {
     width: 100%;
   }
 }
+
+.packery-item.is-dragging,
+.packery-item.is-positioning-post-drag {
+  /*border-color: red;*/
+  /*background: #09F;*/
+  /*z-index: 2;*/
+}