diff --git a/lib/index.js b/lib/index.js index 35ce392..366c307 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,8 +1,10 @@ var isBrowser = (typeof window !== 'undefined'); var Packery = isBrowser ? window.Packery || require('packery') : null; +var Draggabilly = isBrowser ? window.Draggabilly || require('draggabilly') : null; var imagesloaded = isBrowser ? require('imagesloaded') : null; var refName = 'packeryContainer'; + function PackeryComponent(React) { return React.createClass({ packery: false, @@ -25,6 +27,13 @@ function PackeryComponent(React) { }; }, + makeEachDraggable: function(itemElem){ + // make element draggable with Draggabilly + var draggie = new Draggabilly(itemElem); + // bind Draggabilly events to Packery + this.packery.bindDraggabillyEvents(draggie); + }, + initializePackery: function(force) { if (!this.packery || force) { this.packery = new Packery( @@ -32,6 +41,7 @@ function PackeryComponent(React) { this.props.options ); + this.packery.getItemElements().forEach( this.makeEachDraggable ); this.domChildren = this.getNewDomChildren(); } }, @@ -124,22 +134,18 @@ function PackeryComponent(React) { if (diff.removed.length > 0) { this.packery.remove(diff.removed); - this.packery.reloadItems(); } if (diff.appended.length > 0) { this.packery.appended(diff.appended); - this.packery.reloadItems(); } if (diff.prepended.length > 0) { this.packery.prepended(diff.prepended); } - if (diff.moved.length > 0) { - this.packery.reloadItems(); - } - + this.packery.reloadItems(); + this.packery.getItemElements().forEach( this.makeEachDraggable ); this.packery.layout(); }, diff --git a/package.json b/package.json index 3d6b19c..23f620d 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,9 @@ "main": "./lib/index", "description": "A Packery component for React.js", "dependencies": { - "packery": "eiriklv/packery", - "imagesloaded": "eiriklv/imagesloaded" + "packery": "metafizzy/packery", + "imagesloaded": "eiriklv/imagesloaded", + "draggabilly": "^2.1.1" }, "devDependencies": {}, "scripts": {