Start work on drag around naive

examples/_drag-around-naive/Box.js

@@ -2,58 +2,51 @@
 
 import React, { PropTypes } from 'react';
 import ItemTypes from './ItemTypes';
-import { DragDropMixin, DropEffects } from 'react-dnd';
-
-const dragSource = {
-  beginDrag(component) {
-    return {
-      effectAllowed: DropEffects.MOVE,
-      item: component.props
-    };
-  }
-};
+import { configureDragDrop } from 'react-dnd';
 
 const style = {
   position: 'absolute',
   border: '1px dashed gray',
   padding: '0.5rem'
 };
 
-const Box = React.createClass({
-  mixins: [DragDropMixin],
+const BoxSource = {
+  beginDrag(props) {
+    const { id, left, top } = props;
+    return { id, left, top };
+  }
+};
 
-  propTypes: {
+@configureDragDrop(
+  register =>
+    register.dragSource(ItemTypes.BOX, BoxSource),
+
+  boxSource => ({
+    connectDragSource: boxSource.connect(),
+    isDragging: boxSource.isDragging()
+  })
+)
+export default class Box {
+  static propTypes = {
+    connectDragSource: PropTypes.bool.isRequired,
+    isDragging: PropTypes.bool.isRequired,
     id: PropTypes.any.isRequired,
     left: PropTypes.number.isRequired,
     top: PropTypes.number.isRequired,
     hideSourceOnDrag: PropTypes.bool.isRequired
-  },
-
-  statics: {
-    configureDragDrop(register) {
-      register(ItemTypes.BOX, { dragSource });
-    }
-  },
+  };
 
   render() {
-    const { hideSourceOnDrag, left, top, children } = this.props;
-    const { isDragging } = this.getDragState(ItemTypes.BOX);
-
+    const { hideSourceOnDrag, left, top, connectDragSource, isDragging, children } = this.props;
     if (isDragging && hideSourceOnDrag) {
       return null;
     }
 
     return (
-      <div {...this.dragSourceFor(ItemTypes.BOX)}
-           style={{
-            ...style,
-            left,
-            top
-           }}>
+      <div ref={connectDragSource}
+           style={{ ...style, left, top }}>
         {children}
       </div>
     );
   }
-});
-
-export default Box;
+}

examples/_drag-around-naive/Container.js

@@ -1,22 +1,11 @@
 'use strict';
 
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import update from 'react/lib/update';
 import ItemTypes from './ItemTypes';
 import Box from './Box';
-import { DragDropMixin } from'react-dnd';
-
-function makeDropTarget(context) {
-  return {
-    acceptDrop(component, item) {
-      const delta = context.getCurrentOffsetDelta();
-      const left = Math.round(item.left + delta.x);
-      const top = Math.round(item.top + delta.y);
-
-      component.moveBox(item.id, left, top);
-    }
-  };
-}
+import { configureDragDrop, configureDragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd/modules/backends/HTML5';
 
 const styles = {
   width: 300,
@@ -25,29 +14,45 @@ const styles = {
   position: 'relative'
 };
 
-const Container = React.createClass({
-  mixins: [DragDropMixin],
+const BoxTarget = {
+  drop(props, monitor, dropTargetId, component) {
+    const item = monitor.getItem();
+    const delta = monitor.getCurrentOffsetDelta();
+    const left = Math.round(item.left + delta.x);
+    const top = Math.round(item.top + delta.y);
+
+    component.moveBox(item.id, left, top);
+  }
+};
+
+@configureDragDropContext(HTML5Backend)
+@configureDragDrop(
+  register =>
+    register.dropTarget(ItemTypes.BOX, BoxTarget),
 
-  propTypes: {
-    hideSourceOnDrag: PropTypes.bool.isRequired
-  },
+  boxTarget => ({
+    connectDropTarget: boxTarget.connect()
+  })
+)
+export default class Container extends Component {
+  static propTypes = {
+    hideSourceOnDrag: PropTypes.bool.isRequired,
+    connectDropTarget: PropTypes.func.isRequired
+  };
+
+  static contextTypes = {
+    dragDropManager: PropTypes.object
+  }
 
-  getInitialState() {
-    return {
+  constructor(props) {
+    super(props);
+    this.state = {
       boxes: {
         'a': { top: 20, left: 80, title: 'Drag me around' },
         'b': { top: 180, left: 20, title: 'Drag me too' }
       }
     };
-  },
-
-  statics: {
-    configureDragDrop(register, context) {
-      register(ItemTypes.BOX, {
-        dropTarget: makeDropTarget(context)
-      });
-    }
-  },
+  }
 
   moveBox(id, left, top) {
     this.setState(update(this.state, {
@@ -60,14 +65,14 @@ const Container = React.createClass({
         }
       }
     }));
-  },
+  }
 
   render() {
-    const { hideSourceOnDrag } = this.props;
+    const { hideSourceOnDrag, connectDropTarget } = this.props;
     const { boxes} = this.state;
 
     return (
-      <div {...this.dropTargetFor(ItemTypes.BOX)}
+      <div ref={connectDropTarget}
            style={styles}>
 
         {Object.keys(boxes).map(key => {
@@ -87,6 +92,4 @@ const Container = React.createClass({
       </div>
     );
   }
-});
-
-export default Container;
+}

examples/_drag-around-naive/index.js

@@ -44,7 +44,6 @@ const DragAroundNaive = React.createClass({
           If we want to add custom logic such as snapping to grid or bounds checking, we can only do this on drop.
           There is no way for us to control what happens to dragged preview once the browser has drawn it.
         </p>
-        <p>Next: <Link to='drag-around-custom'>providing custom drag feedback</Link>.</p>
       </div>
     );
   }

examples/index.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import Router, { Route, Link, Redirect, RouteHandler } from 'react-router';
 import AnimationFrame from 'animation-frame';
+import DragAroundNaive from './_drag-around-naive/index';
 import DustbinSimple from './_dustbin-simple';
 import DustbinInteresting from './_dustbin-interesting';
 import DustbinStress from './_dustbin-stress';
@@ -13,7 +14,6 @@ import CustomizeHandles from './_customize-handles';
 import CustomizeEffects from './_customize-effects';
 
 /*
-DragAroundNaive = require('./_drag-around-naive/index'),
 DragAroundCustom = require('./_drag-around-custom/index'),
 */
 
@@ -23,6 +23,7 @@ const App = React.createClass({
       <div>
         <h1>react-dnd examples (<a target='_href' href='https://github.com/gaearon/react-dnd/blob/master/examples'>source</a>)</h1>
         <ul>
+          <li>Drag Around (<Link to='drag-around-naive'>naive</Link>)</li>
           <li>Dustbin (<Link to='dustbin-simple'>simple</Link>, <Link to='dustbin-interesting'>interesting</Link>, <Link to='dustbin-stress'>stress test</Link>)</li>
           <li>Nesting (<Link to='nesting-sources'>drag sources</Link>)</li>
           <li>Sortable (<Link to='sortable-simple'>simple</Link>, <Link to='sortable-stress'>stress test</Link>)</li>
@@ -37,12 +38,13 @@ const App = React.createClass({
 
 /*
 <ul>
-  <li>Drag Around (<Link to='drag-around-naive'>naive</Link>, <Link to='drag-around-custom'>custom</Link>)</li>
+<li>Drag Around (<Link to='drag-around-naive'>naive</Link>, <Link to='drag-around-custom'>custom</Link>)</li>
 </ul>
 */
 
 const routes = (
   <Route handler={App}>
+    <Route name='drag-around-naive' path='drag-around-naive' handler={DragAroundNaive} />
     <Route name='dustbin-simple' path='dustbin-simple' handler={DustbinSimple} />
     <Route name='dustbin-interesting' path='dustbin-interesting' handler={DustbinInteresting} />
     <Route name='dustbin-stress' path='dustbin-stress' handler={DustbinStress} />