diff --git a/package.json b/package.json
index bffd59f3..bbc3cb5b 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   "dependencies": {
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
+    "react-sortable-hoc": "0.0.7",
     "react-virtualized": "^7.17.0"
   },
   "peerDependencies": {
diff --git a/src/node-renderer-default.js b/src/node-renderer-default.js
index 02def509..bc2f9af8 100644
--- a/src/node-renderer-default.js
+++ b/src/node-renderer-default.js
@@ -17,11 +17,12 @@ if (getIEVersion < 10) {
 const NodeRendererDefault = ({
     scaffoldBlockPxWidth,
     toggleChildrenVisibility,
-    connectDragPreview,
-    connectDragSource,
-    isDragging,
-    isOver,
-    canDrop,
+    // connectDragPreview,
+    // connectDragSource,
+    // isDragging,
+    // isOver,
+    // canDrop,
+    sortableHandle,
     node,
     path,
     treeIndex,
@@ -49,20 +50,23 @@ const NodeRendererDefault = ({
                 </div>
             </div>
         );
-    } else if (isDragging) {
-        handle = (<div className={styles.loadingHandle} />);
+    // } else if (isDragging) {
+        // handle = (<div className={styles.loadingHandle} />);
     } else {
         let myStyle = {};
-        if (isOver && canDrop) {
-            myStyle = { backgroundColor: 'lightblue' };
-        }
+        // if (isOver && canDrop) {
+        //     myStyle = { backgroundColor: 'lightblue' };
+        // }
 
         // Show the handle used to initiate a drag-and-drop
-        handle = connectDragSource((
-            <div className={styles.moveHandle} style={myStyle} />
-        ), { dropEffect: 'copy' });
+        // handle = connectDragSource((
+        //     <div className={styles.moveHandle} style={myStyle} />
+        // ), { dropEffect: 'copy' });
+        handle = <div className={styles.moveHandle} style={myStyle} />;
     }
 
+    const Handle = sortableHandle(() => handle);
+
     return (
         <div style={{ height: '100%' }}>
             {toggleChildrenVisibility && node.children && node.children.length > 0 && (
@@ -74,37 +78,35 @@ const NodeRendererDefault = ({
             )}
 
             {/* Set the row preview to be used during drag and drop */}
-            {connectDragPreview(
-                <div className={styles.row + (isDragging ? ` ${styles.rowOriginWhileDragging}` : '')}>
-                    {handle}
-
-                    <div className={styles.rowContents}>
-                        <div className={styles.rowLabel}>
-                            <span
-                                className={styles.rowTitle +
-                                    (node.subtitle ? ` ${styles.rowTitleWithSubtitle}` : '')
-                                }
-                            >
-                                {node.title}
-                            </span>
+            <div className={styles.row}>
+                <Handle />
 
-                            {node.subtitle &&
-                                <span className={styles.rowSubtitle}>
-                                    {node.subtitle}
-                                </span>
+                <div className={styles.rowContents}>
+                    <div className={styles.rowLabel}>
+                        <span
+                            className={styles.rowTitle +
+                                (node.subtitle ? ` ${styles.rowTitleWithSubtitle}` : '')
                             }
-                        </div>
+                        >
+                            {node.title}
+                        </span>
+
+                        {node.subtitle &&
+                            <span className={styles.rowSubtitle}>
+                                {node.subtitle}
+                            </span>
+                        }
+                    </div>
 
-                        <div className={styles.rowToolbar}>
-                            {buttons && buttons.map((btn, index) => (
-                                <div key={index} className={styles.toolbarButton}>
-                                    {btn}
-                                </div>
-                            ))}
-                        </div>
+                    <div className={styles.rowToolbar}>
+                        {buttons && buttons.map((btn, index) => (
+                            <div key={index} className={styles.toolbarButton}>
+                                {btn}
+                            </div>
+                        ))}
                     </div>
-                ️</div>
-            )}
+                </div>
+            ️</div>
         </div>
     );
 };
@@ -119,14 +121,15 @@ NodeRendererDefault.propTypes = {
     toggleChildrenVisibility: PropTypes.func,
     buttons:                  PropTypes.arrayOf(PropTypes.node),
 
+    sortableHandle: PropTypes.func.isRequired,
     // Drag and drop API functions
     // Drag source
-    connectDragPreview: PropTypes.func.isRequired,
-    connectDragSource:  PropTypes.func.isRequired,
-    isDragging:         PropTypes.bool.isRequired,
-    // Drop target
-    isOver:  PropTypes.bool.isRequired,
-    canDrop: PropTypes.bool.isRequired,
+    // connectDragPreview: PropTypes.func.isRequired,
+    // connectDragSource:  PropTypes.func.isRequired,
+    // isDragging:         PropTypes.bool.isRequired,
+    // // Drop target
+    // isOver:  PropTypes.bool.isRequired,
+    // canDrop: PropTypes.bool.isRequired,
 };
 
 export default NodeRendererDefault;
diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js
index f14f85b6..7c8a8e7a 100644
--- a/src/react-sortable-tree.js
+++ b/src/react-sortable-tree.js
@@ -5,6 +5,11 @@
  */
 
 import React, { Component, PropTypes } from 'react';
+import {
+    SortableContainer as sortableContainer,
+    SortableElement as sortableElement,
+    SortableHandle as sortableHandle,
+} from 'react-sortable-hoc';
 import { AutoSizer, VirtualScroll } from 'react-virtualized';
 import 'react-virtualized/styles.css';
 import TreeNode from './tree-node';
@@ -15,10 +20,10 @@ import {
     removeNodeAtPath,
     addNodeUnderParentPath,
 } from './utils/tree-data-utils';
-import {
-    dndWrapRoot,
-    dndWrapSource,
-} from './utils/drag-and-drop-utils';
+// import {
+//     dndWrapRoot,
+//     dndWrapSource,
+// } from './utils/drag-and-drop-utils';
 import styles from './react-sortable-tree.scss';
 
 function defaultGetNodeKey({ node: _node, treeIndex }) {
@@ -66,11 +71,14 @@ class ReactSortableTree extends Component {
         this.toggleChildrenVisibility = (
             props.toggleChildrenVisibility || defaultToggleChildrenVisibility
         ).bind(this);
-        this.nodeContentRenderer = dndWrapSource(
+        this.nodeContentRenderer = /* dndWrapSource */(
             props.nodeContentRenderer ||
             require('./node-renderer-default').default // eslint-disable-line global-require
         );
 
+        this.rowRenderer = sortableElement(this.renderRow);
+        this.listRenderer = sortableContainer(this.renderList);
+
         this.state = {
             draggingTreeData: null,
             rows: this.getRows(props.treeData),
@@ -144,6 +152,11 @@ class ReactSortableTree extends Component {
             });
         }
 
+        // return this.setState({
+        //     draggingTreeData: null,
+        //     rows: this.getRows(this.props.treeData),
+        // });
+
         this.moveNode({
             node,
             path,
@@ -191,38 +204,81 @@ class ReactSortableTree extends Component {
     }
 
     render() {
+        const ListRenderer = this.listRenderer;
         const {
             style,
             className,
-            rowHeight,
         } = this.props;
-        const { rows } = this.state;
+
+        const listProps = {
+            rows:        this.state.rows,
+            RowRenderer: this.rowRenderer,
+            rowHeight:   this.props.rowHeight,
+        };
+
+        const rowProps = {
+            toggleChildrenVisibility: this.props.toggleChildrenVisibility,
+            scaffoldBlockPxWidth:     this.props.scaffoldBlockPxWidth,
+            generateNodeProps:        this.props.generateNodeProps,
+            NodeContentRenderer:      this.nodeContentRenderer,
+        };
 
         return (
             <div
                 className={styles.tree + (className ? ` ${className}` : '')}
                 style={{ height: '100%', ...style }}
             >
-                <AutoSizer>
-                    {({height, width}) => (
-                        <VirtualScroll
-                            className={styles.virtualScrollOverride}
-                            width={width}
-                            height={height}
-                            rowCount={rows.length}
-                            estimatedRowSize={rowHeight}
-                            rowHeight={rowHeight}
-                            rowRenderer={({ index }) => this.renderRow(rows[index], index)}
-                        />
-                    )}
-                </AutoSizer>
+                <ListRenderer
+                    listProps={listProps}
+                    rowProps={rowProps}
+                    useDragHandle
+                />
             </div>
         );
     }
 
-    renderRow({ node, path, lowerSiblingCounts }, treeIndex) {
-        const NodeContentRenderer = this.nodeContentRenderer;
-        const nodeProps = !this.props.generateNodeProps ? {} : this.props.generateNodeProps({
+    renderList({
+        listProps: {
+            rows,
+            RowRenderer,
+            rowHeight,
+        },
+        rowProps,
+    }) {
+        return (
+            <AutoSizer>
+                {({height, width}) => (
+                    <VirtualScroll
+                        className={styles.virtualScrollOverride}
+                        width={width}
+                        height={height}
+                        rowCount={rows.length}
+                        estimatedRowSize={rowHeight}
+                        rowHeight={rowHeight}
+                        rowRenderer={({ index }) => (
+                            <RowRenderer
+                                value={rows[index]}
+                                index={index}
+                                rowProps={rowProps}
+                            />
+                        )}
+                    />
+                )}
+            </AutoSizer>
+        );
+    }
+
+    renderRow({
+        value: { node, path, lowerSiblingCounts },
+        index: treeIndex,
+        rowProps: {
+            toggleChildrenVisibility,
+            scaffoldBlockPxWidth,
+            generateNodeProps,
+            NodeContentRenderer,
+        },
+    }) {
+        const nodeProps = !generateNodeProps ? {} : generateNodeProps({
             node,
             path,
             lowerSiblingCounts,
@@ -234,18 +290,16 @@ class ReactSortableTree extends Component {
                 treeIndex={treeIndex}
                 path={path}
                 lowerSiblingCounts={lowerSiblingCounts}
-                scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
-                dragHover={this.dragHover}
+                scaffoldBlockPxWidth={scaffoldBlockPxWidth}
             >
                 <NodeContentRenderer
                     node={node}
                     path={path}
                     lowerSiblingCounts={lowerSiblingCounts}
                     treeIndex={treeIndex}
-                    startDrag={this.startDrag}
-                    endDrag={this.endDrag}
-                    toggleChildrenVisibility={this.toggleChildrenVisibility}
-                    scaffoldBlockPxWidth={this.props.scaffoldBlockPxWidth}
+                    toggleChildrenVisibility={toggleChildrenVisibility}
+                    scaffoldBlockPxWidth={scaffoldBlockPxWidth}
+                    sortableHandle={sortableHandle}
                     {...nodeProps}
                 />
             </TreeNode>
@@ -286,4 +340,4 @@ ReactSortableTree.defaultProps = {
     loadCollapsedLazyChildren: false,
 };
 
-export default dndWrapRoot(ReactSortableTree);
+export default /* dndWrapRoot( */ReactSortableTree/* ) */;
diff --git a/src/tree-node.js b/src/tree-node.js
index 9d679f51..5f353a54 100644
--- a/src/tree-node.js
+++ b/src/tree-node.js
@@ -1,5 +1,5 @@
-import React, { PropTypes, Children, cloneElement } from 'react';
-import { dndWrapTarget } from './utils/drag-and-drop-utils';
+import React, { PropTypes, /* Children, cloneElement */ } from 'react';
+// import { dndWrapTarget } from './utils/drag-and-drop-utils';
 import styles from './tree-node.scss';
 
 const TreeNode = ({
@@ -7,9 +7,9 @@ const TreeNode = ({
     treeIndex,
     scaffoldBlockPxWidth,
     lowerSiblingCounts,
-    connectDropTarget,
-    isOver,
-    canDrop,
+    // connectDropTarget,
+    // isOver,
+    // canDrop,
 }) => {
     // Construct the scaffold representing the structure of the tree
     const scaffoldBlockCount = lowerSiblingCounts.length;
@@ -69,7 +69,7 @@ const TreeNode = ({
         );
     });
 
-    return connectDropTarget(
+    return /* connectDropTarget */(
         <li className={styles.node}>
             {scaffold}
 
@@ -77,10 +77,7 @@ const TreeNode = ({
                 className={styles.nodeContent}
                 style={{ left: scaffoldBlockPxWidth * scaffoldBlockCount }}
             >
-                {Children.map(children, child => cloneElement(child, {
-                    isOver,
-                    canDrop,
-                }))}
+                {children}
             </div>
         </li>
     );
@@ -94,9 +91,9 @@ TreeNode.propTypes = {
     lowerSiblingCounts:   PropTypes.array.isRequired,
 
     // Drop target
-    connectDropTarget: PropTypes.func.isRequired,
-    isOver:            PropTypes.bool.isRequired,
-    canDrop:           PropTypes.bool.isRequired,
+    // connectDropTarget: PropTypes.func.isRequired,
+    // isOver:            PropTypes.bool.isRequired,
+    // canDrop:           PropTypes.bool.isRequired,
 };
 
-export default dndWrapTarget(TreeNode);
+export default /* dndWrapTarget */(TreeNode);