move instance to version argument;

require get-size v1;
fix event names for the contained draggies

README.md

@@ -78,32 +78,32 @@ draggie.on( 'dragMove', function() {
 ### dragStart
 
 ```js
-.on( 'dragStart', function( event, pointer, draggieInstance ) { //...
+.on( 'dragStart', function( draggieInstance, event, pointer ) { //...
 ```
 
++ `draggieInstance` - **Type:** _Draggabilly_ - the Draggabilly instance
 + `event` - **Type:** _Event_ - the original `mousedown` or `touchstart` event
 + `pointer` - **Type:** _MouseEvent_ or _Touch_ - the event object that has `.pageX` and `.pageY`
-+ `draggieInstance` - **Type:** _Draggabilly_ - the Draggabilly instance
 
 ### dragMove
 
 ```js
-.on( 'dragMove', function( event, pointer, draggieInstance ) { //...
+.on( 'dragMove', function( draggieInstance, event, pointer ) { //...
 ```
 
++ `draggieInstance` - **Type:** _Draggabilly_ - the Draggabilly instance
 + `event` - **Type:** _Event_ - the original `mousemove` or `touchmove` event
 + `pointer` - **Type:** _MouseEvent_ or _Touch_ - the event object that has `.pageX` and `.pageY`
-+ `draggieInstance` - **Type:** _Draggabilly_ - the Draggabilly instance
 
 ### dragEnd
 
 ```js
-.on( 'dragEnd', function( event, pointer, draggieInstance ) { //...
+.on( 'dragEnd', function( draggieInstance, event, pointer ) { //...
 ```
 
++ `draggieInstance` - **Type:** _Draggabilly_ - the Draggabilly instance
 + `event` - **Type:** _Event_ - the original `mouseup` or `touchend` event
 + `pointer` - **Type:** _MouseEvent_ or _Touch_ - the event object that has `.pageX` and `.pageY`
-+ `draggieInstance` - **Type:** _Draggabilly_ - the Draggabilly instance
 
 ## Methods
 

component.json

@@ -1,12 +1,12 @@
 {
   "name": "draggabilly",
   "main": "./draggabilly.js",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "dependencies": {
     "classie": "desandro/classie",
     "eventEmitter": ">=3",
     "eventie": "desandro/eventie",
-    "get-size": "desandro/get-size#>=0.0.8",
+    "get-size": "desandro/get-size#>=1.0.0",
     "get-style-property": "desandro/get-style-property"
   }
 }

draggabilly.js

@@ -1,5 +1,5 @@
 /*!
- * Draggabilly v0.1.2
+ * Draggabilly v1.0.0
  * Make that shiz draggable
  * http://draggabilly.desandro.com
  */
@@ -276,7 +276,7 @@ Draggabilly.prototype.dragStart = function( event, pointer ) {
   // reset isDragging flag
   this.isDragging = true;
 
-  this.emitEvent( 'dragStart', [ event, pointer, this ] );
+  this.emitEvent( 'dragStart', [ this, event, pointer ] );
 
   // start animation
   this.animate();
@@ -345,7 +345,7 @@ Draggabilly.prototype.dragMove = function( event, pointer ) {
   this.position.x = this.startPosition.x + this.dragPoint.x;
   this.position.y = this.startPosition.y + this.dragPoint.y;
 
-  this.emitEvent( 'dragMove', [ event, pointer, this ] );
+  this.emitEvent( 'dragMove', [ this, event, pointer ] );
 };
 
 
@@ -386,7 +386,7 @@ Draggabilly.prototype.dragEnd = function( event, pointer ) {
 
   classie.remove( this.element, 'is-dragging' );
 
-  this.emitEvent( 'dragEnd', [ event, pointer, this ] );
+  this.emitEvent( 'dragEnd', [ this, event, pointer ] );
 
 };
 

index.html

@@ -122,15 +122,15 @@ <h1>Draggabilly</h1>
   var drag2 = new Draggabilly( ex2 );
 
 
-  drag2.on( 'dragStart', function( event, pointer, instance ) {
+  drag2.on( 'dragStart', function( instance, event, pointer ) {
     console.log('dragStart', instance.position.x, instance.position.y, event.type, pointer.pageX, pointer.pageY );
   });
 
-  drag2.on( 'dragMove', function( event, pointer, instance ) {
+  drag2.on( 'dragMove', function( instance, event, pointer ) {
     console.log('dragMove', instance.position.x, instance.position.y, event.type, pointer.pageX, pointer.pageY );
   });
 
-  drag2.on( 'dragEnd', function( event, pointer, instance ) {
+  drag2.on( 'dragEnd', function( instance, event, pointer ) {
     console.log( 'dragEnd', instance.position.x, instance.position.y, event && event.type, pointer && pointer.pageX, pointer && pointer.pageY );
   });
 
@@ -143,15 +143,15 @@ <h1>Draggabilly</h1>
 
   var elems = document.querySelectorAll('#container1 .box');
 
-  function handleDraggerEvent( event, pointer, instance ) {
+  function handleDraggerEvent( instance, event, pointer ) {
     console.log( event.type, instance.position.x, instance.position.y );
   }
   for ( var i=0, len = elems.length; i < len; i++ ) {
     dragger = new Draggabilly( elems[i], {
       containment: true
     });
-    dragger.on( 'start', handleDraggerEvent );
-    dragger.on( 'drag', handleDraggerEvent );
+    dragger.on( 'dragStart', handleDraggerEvent );
+    dragger.on( 'dragEnd', handleDraggerEvent );
   }
 
   // toggle drag2 enable/disable on [B] keypress