react-draggable - npm Package Compare versions

Comparing version 0.8.1 to 0.8.2

bower.json

 {
   "name": "react-draggable",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "homepage": "https://github.com/mzabriskie/react-draggable",
@@ -5,0 +5,0 @@ "authors": [

CHANGELOG.md

@@ -100,1 +100,9 @@ # Changelog
 - Add `resetState()` instance method for use by parents. See README ("State Problems?").
+
+### 0.8.2 (Sep 21, 2015)
+
+- Handle scrolling while dragging. (#60)
+- Add multi-touch support. (#68)
+- IE fixes.
+- Documentation updates. (#77)
+

lib/draggable.js

@@ -7,2 +7,3 @@ 'use strict';
 var classNames = require('classnames');
+var browserPrefix = require('./getPrefix')();
 
@@ -25,10 +26,8 @@ //
 
-function canDragY(draggable) {
-  return draggable.props.axis === 'both' ||
-      draggable.props.axis === 'y';
+function canDragX(draggable) {
+  return draggable.props.axis === 'both' || draggable.props.axis === 'x';
 }
 
-function canDragX(draggable) {
-  return draggable.props.axis === 'both' ||
-      draggable.props.axis === 'x';
+function canDragY(draggable) {
+  return draggable.props.axis === 'both' || draggable.props.axis === 'y';
 }
@@ -47,14 +46,17 @@
 
+var matchesSelectorFunc = '';
 function matchesSelector(el, selector) {
-  var method = findInArray([
-    'matches',
-    'webkitMatchesSelector',
-    'mozMatchesSelector',
-    'msMatchesSelector',
-    'oMatchesSelector'
-  ], function(method){
-    return isFunction(el[method]);
-  });
+  if (!matchesSelectorFunc) {
+    matchesSelectorFunc = findInArray([
+      'matches',
+      'webkitMatchesSelector',
+      'mozMatchesSelector',
+      'msMatchesSelector',
+      'oMatchesSelector'
+    ], function(method){
+      return isFunction(el[method]);
+    });
+  }
 
-  return el[method].call(el, selector);
+  return el[matchesSelectorFunc].call(el, selector);
 }
@@ -79,3 +81,3 @@
 // Default to mouse events
-var dragEventFor = eventsFor['mouse'];
+var dragEventFor = eventsFor.mouse;
 
@@ -86,3 +88,3 @@ /**
 function getControlPosition(e) {
-  var position = (e.touches && e.touches[0]) || e;
+  var position = (e.targetTouches && e.targetTouches[0]) || e;
   return {
@@ -196,4 +198,6 @@ clientX: position.clientX,
 // Useful for preventing blue highlights all over everything when dragging.
-var userSelectStyle = ';user-select: none;-webkit-user-select:none;-moz-user-select:none;' +
-  '-o-user-select:none;-ms-user-select:none;';
+var userSelectStyle = ';user-select: none;';
+if (browserPrefix) {
+  userSelectStyle += '-' + browserPrefix.toLowerCase() + '-user-select: none;';
+}
 
@@ -216,9 +220,8 @@ function addUserSelectStyles(draggable) {
   var y = style.y + 'px';
-  return {
-    transform: 'translate(' + x + ',' + y + ')',
-    WebkitTransform: 'translate(' + x + ',' + y + ')',
-    OTransform: 'translate(' + x + ',' + y + ')',
-    msTransform: 'translate(' + x + ',' + y + ')',
-    MozTransform: 'translate(' + x + ',' + y + ')'
-  };
+  var out = {transform: 'translate(' + x + ',' + y + ')'};
+  // Add single prefixed property as well
+  if (browserPrefix) {
+    out[browserPrefix + 'Transform'] = out.transform;
+  }
+  return out;
 }
@@ -470,3 +473,3 @@
      */
-    onMouseDown: React.PropTypes.func,
+    onMouseDown: React.PropTypes.func
   },
@@ -483,4 +486,4 @@
     // Remove any leftover event handlers
-    removeEvent(document, dragEventFor['move'], this.handleDrag);
-    removeEvent(document, dragEventFor['end'], this.handleDragEnd);
+    removeEvent(document, dragEventFor.move, this.handleDrag);
+    removeEvent(document, dragEventFor.end, this.handleDragEnd);
     removeUserSelectStyles(this);
@@ -523,2 +526,7 @@ },
   handleDragStart: function (e) {
+    // Set touch identifier in component state if this is a touch event
+    if(e.targetTouches){
+      this.setState({touchIdentifier: e.targetTouches[0].identifier});
+    }
+    
     // Make it possible to attach event handlers on top of this one
@@ -549,3 +557,5 @@ this.props.onMouseDown(e);
       offsetX: dragPoint.clientX - this.state.clientX,
-      offsetY: dragPoint.clientY - this.state.clientY
+      offsetY: dragPoint.clientY - this.state.clientY,
+      scrollX: document.body.scrollLeft,
+      scrollY: document.body.scrollTop
     });
@@ -555,4 +565,5 @@
     // Add event handlers
-    addEvent(document, dragEventFor['move'], this.handleDrag);
-    addEvent(document, dragEventFor['end'], this.handleDragEnd);
+    addEvent(document, 'scroll', this.handleScroll);
+    addEvent(document, dragEventFor.move, this.handleDrag);
+    addEvent(document, dragEventFor.end, this.handleDragEnd);
   },
@@ -566,2 +577,7 @@
 
+    // Short circuit if this is not the correct touch event
+    if(e.changedTouches && (e.changedTouches[0].identifier != this.state.touchIdentifier)){
+     return;
+    } 
+
     removeUserSelectStyles(this);
@@ -578,7 +594,12 @@
     // Remove event handlers
-    removeEvent(document, dragEventFor['move'], this.handleDrag);
-    removeEvent(document, dragEventFor['end'], this.handleDragEnd);
+    removeEvent(document, 'scroll', this.handleScroll);
+    removeEvent(document, dragEventFor.move, this.handleDrag);
+    removeEvent(document, dragEventFor.end, this.handleDragEnd);
   },
 
   handleDrag: function (e) {
+    // Return if this is a touch event, but not the correct one for this element
+    if(e.targetTouches && (e.targetTouches[0].identifier != this.state.touchIdentifier)){
+      return;
+    }
     var dragPoint = getControlPosition(e);
@@ -593,3 +614,4 @@
       var coords = snapToGrid(this.props.grid, clientX, clientY);
-      clientX = coords[0], clientY = coords[1];
+      clientX = coords[0];
+      clientY = coords[1];
     }
@@ -599,3 +621,4 @@
       var pos = getBoundPosition(this, clientX, clientY);
-      clientX = pos[0], clientY = pos[1];
+      clientX = pos[0];
+      clientY = pos[1];
     }
@@ -614,2 +637,15 @@
 
+  handleScroll: function(e) {
+    var s = this.state, x = document.body.scrollLeft, y = document.body.scrollTop;
+    var offsetX = x - s.scrollX, offsetY = y - s.scrollY;
+    this.setState({
+      scrollX: x,
+      scrollY: y,
+      clientX: s.clientX + offsetX,
+      clientY: s.clientY + offsetY,
+      offsetX: s.offsetX - offsetX,
+      offsetY: s.offsetY - offsetY
+    });
+  },
+
   onMouseDown: function(ev) {
@@ -619,3 +655,3 @@ // Prevent 'ghost click' which happens 300ms after touchstart if the event isn't cancelled.
     // More on ghost clicks: http://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/
-    if (dragEventFor == eventsFor['touch']) {
+    if (dragEventFor === eventsFor.touch) {
       return ev.preventDefault();
@@ -629,3 +665,3 @@ }
     // We're on a touch device now, so change the event handlers
-    dragEventFor = eventsFor['touch'];
+    dragEventFor = eventsFor.touch;
 
@@ -657,3 +693,3 @@ return this.handleDragStart.apply(this, arguments);
         this.state.clientX :
-        0,
+        this.props.start.x,
 
@@ -663,3 +699,3 @@ // Set top if vertical drag is enabled
         this.state.clientY :
-        0
+        this.props.start.y
     });
@@ -666,0 +702,0 @@

package.json

 {
   "name": "react-draggable",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "React draggable component",
@@ -28,20 +28,20 @@ "main": "index.js",
     "jsx-loader": "^0.13.2",
-    "karma": "^0.12.19",
-    "karma-chrome-launcher": "^0.1.4",
-    "karma-cli": "0.0.4",
-    "karma-firefox-launcher": "^0.1.3",
-    "karma-jasmine": "^0.1.5",
-    "karma-webpack": "^1.2.1",
+    "karma": "^0.13.10",
+    "karma-chrome-launcher": "^0.2.0",
+    "karma-cli": "0.1.0",
+    "karma-firefox-launcher": "^0.1.6",
+    "karma-jasmine": "^0.3.6",
+    "karma-webpack": "^1.7.0",
     "open": "0.0.5",
-    "react": "^0.13.2",
-    "semver": "^4.3.3",
+    "react": "^0.13.3",
+    "semver": "^5.0.3",
     "static-server": "^2.0.0",
-    "uglify-js": "^2.4.15",
-    "webpack": "^1.3.2-beta8",
-    "webpack-dev-server": "^1.4.7"
+    "uglify-js": "^2.4.24",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.11.0"
   },
   "dependencies": {
-    "classnames": "^1.2.2",
-    "object-assign": "^2.0.0"
+    "classnames": "^2.1.3",
+    "object-assign": "^4.0.1"
   }
 }

README.md

@@ -39,2 +39,12 @@ # react-draggable [![Build Status](https://travis-ci.org/mzabriskie/react-draggable.svg?branch=master)](https://travis-ci.org/mzabriskie/react-draggable)
 
+For the `<Draggable/>` component to correctly attach itself to its child, the child element must provide support for the following props:
+- `style` is used to give the transform css to the child.
+- `className` is used to apply the proper classes to the object being dragged.
+- `onMouseDown` is used along with onMouseUp to keep track of dragging state.
+- `onMouseUp` is used along with onMouseDown to keep track of dragging state.
+- `onTouchStart` is used along with onTouchEnd to keep track of dragging state.
+- `onTouchEnd` is used along with onTouchStart to keep track of dragging state.
+
+React.DOM elements support the above six properties by default, so you may use those elements as children without any changes. If you wish to use a React component you created, you might find [this React page](https://facebook.github.io/react/docs/transferring-props.html) helpful.
+
 Props:
@@ -133,3 +143,9 @@
 
+## Dragging images
 
+The HTML5 Drag & Drop API can interact strangely with `<Draggable>`, especially on `<img>` tags.
+
+If you want an `<img>` to be draggable, set `<img draggable="false" />`. See the
+[corresponding issue](https://github.com/mzabriskie/react-draggable/issues/69).
+
 ## Contributing
@@ -136,0 +152,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36857

increased by15.02%

Number of package files

10

increased by25%

Lines of code

663

increased by7.46%

Number of lines in readme file

169

increased by10.46%

Dependency changes

• + Addedclassnames@2.5.1(transitive)

• + Addedobject-assign@4.1.1(transitive)

• - Removedclassnames@1.2.2(transitive)

• - Removedobject-assign@2.1.1(transitive)

• Updatedclassnames@^2.1.3

• Updatedobject-assign@^4.0.1