fix for Draggabilly v1.2; Fixes #246

remove old race condition sandbox example

changelog.md

@@ -2,10 +2,11 @@
 
 ## v1.4.0
 
-+ Changed `bower.json` `main` to just `js/packery.js`
 + Upgraded Outlayer to `v1.4.0`
-  - enabled `percentPosition` option
+  - enabled `percentPosition` option. Fixed [#236](https://github.com/metafizzy/packery/issues/236)
   - removed `instance` argument from `layoutComplete` and `removeComplete`
++ Fixed bugs with Draggabilly v1.2. Fixed [#246](https://github.com/metafizzy/packery/issues/246)
++ Changed `bower.json` `main` to just `js/packery.js`
 
 ### v1.3.2
 

js/packery.js

@@ -74,14 +74,14 @@ Packery.prototype._create = function() {
   // create drag handlers
   var _this = this;
   this.handleDraggabilly = {
-    dragStart: function( draggie ) {
-      _this.itemDragStart( draggie.element );
+    dragStart: function() {
+      _this.itemDragStart( this.element );
     },
-    dragMove: function( draggie ) {
-      _this.itemDragMove( draggie.element, draggie.position.x, draggie.position.y );
+    dragMove: function() {
+      _this.itemDragMove( this.element, this.position.x, this.position.y );
     },
-    dragEnd: function( draggie ) {
-      _this.itemDragEnd( draggie.element );
+    dragEnd: function() {
+      _this.itemDragEnd( this.element );
     }
   };
 

sandbox/draggabilly.html

@@ -84,8 +84,10 @@ <h1>Draggabilly</h1>
 <script src="../bower_components/classie/classie.js"></script>
 <script src="../bower_components/eventEmitter/EventEmitter.js"></script>
 <script src="../bower_components/doc-ready/doc-ready.js"></script>
-<script src="../bower_components/draggabilly/draggabilly.js"></script>
 <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
+<script src="../bower_components/unipointer/unipointer.js"></script>
+<script src="../bower_components/unidragger/unidragger.js"></script>
+<script src="../bower_components/draggabilly/draggabilly.js"></script>
 <script src="../bower_components/outlayer/item.js"></script>
 <script src="../bower_components/outlayer/outlayer.js"></script>
 <script src="../js/rect.js"></script>
@@ -145,20 +147,20 @@ <h1>Draggabilly</h1>
     var draggies = bindDraggies( packery4 );
 
     // when clicked toggle expanded
-    function onDragEnd( draggie ) {
-      var p1 = draggie.position;
-      var p2 = draggie.startPosition;
+    function onDragEnd() {
+      var p1 = this.position;
+      var p2 = this.startPosition;
       // only proceed if stuff has moved
       if ( p1.x !== p2.x || p1.y !== p2.y ) {
         return;
       }
       // dragger didn't move
-      var isExpanded = classie.has( draggie.element, 'expanded' );
-      classie.toggle( draggie.element, 'expanded' );
+      var isExpanded = classie.has( this.element, 'expanded' );
+      classie.toggle( this.element, 'expanded' );
       if ( !isExpanded ) {
         // HACK unplace first
-        packery4.unplace( draggie.element );
-        packery4.fit( draggie.element );
+        packery4.unplace( this.element );
+        packery4.fit( this.element );
       } else {
         packery4.layout();
       }