fix: children elements in nested lists drag parent elements.

Author: Andrew Russell

src/.stories/Storybook.scss

@@ -112,6 +112,24 @@
     }
 }
 
+// Nested
+.category {
+  height: auto;
+  margin-bottom: 20px;
+
+  .categoryHeader {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #EFEFEF;
+  }
+
+  .categoryList {
+    height: auto;
+  }
+}
+
 // Divider
 .divider {
     padding: 10px 20px;

src/.stories/index.js

@@ -27,14 +27,26 @@ const Item = SortableElement((props) => {
         <div className={props.className} style={{
             height: props.height
         }}>
-			{props.shouldUseDragHandle && <Handle/>}
+      {props.shouldUseDragHandle && <Handle/>}
 			<div className={style.wrapper}>
 	            <span>Item</span> {props.value}
 			</div>
         </div>
     )
 });
 
+const Category = SortableElement((props) => {
+  return (
+    <div className={style.category}>
+      <div className={style.categoryHeader}>
+        <Handle/>
+        <span>Category {props.value}</span>
+      </div>
+			<ListWrapper component={SortableList} className={style.categoryList} items={getItems(5, 59)} shouldUseDragHandle={true} helperClass={style.stylizedHelper} />
+    </div>
+  )
+});
+
 class ListWrapper extends Component {
 	constructor({items}) {
 		super();
@@ -239,6 +251,20 @@ const ShrinkingSortableList = SortableContainer(({className, isSorting, items, i
 	);
 });
 
+const NestedSortableList = SortableContainer(({className, items, isSorting, sortableHandlers}) => {
+  return (
+    <div className={className} {...sortableHandlers}>
+      {items.map((value, index) =>
+        <Category
+          key={`category-${value}`}
+          index={index}
+          value={value}
+        />
+      )}
+    </div>
+  );
+});
+
 storiesOf('Basic Configuration', module)
 .add('Basic usage', () => {
 	return (
@@ -283,6 +309,13 @@ storiesOf('Basic Configuration', module)
 		</div>
 	);
 })
+.add('Nested Lists', () => {
+  return (
+    <div className={style.root}>
+      <ListWrapper component={NestedSortableList} items={range(4)} shouldUseDragHandle={true} helperClass={style.stylizedHelper} />
+    </div>
+  );
+})
 
 storiesOf('Advanced', module)
 .add('Press delay (200ms)', () => {

src/SortableContainer/index.js

@@ -116,7 +116,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
 
 			const node = closest(e.target, (el) => el.sortableInfo != null);
 
-			if (node && node.sortableInfo && !this.state.sorting) {
+			if (node && node.sortableInfo && this.nodeIsChild(node) && !this.state.sorting) {
 				const {useDragHandle} = this.props;
 				const {index, collection} = node.sortableInfo;
 
@@ -143,6 +143,10 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
 			}
 		};
 
+    nodeIsChild = node => {
+      return node.sortableInfo.manager == this.manager;
+    };
+
 		handleMove = (e) => {
 			const {distance} = this.props;
 

src/SortableElement/index.js

@@ -58,7 +58,10 @@ export default function sortableElement (WrappedComponent, config = {withRef: fa
         setDraggable(collection, index){
             let node = this.node = findDOMNode(this);
 
-            node.sortableInfo = {index, collection};
+            node.sortableInfo = {
+              index, collection,
+              manager: this.context.manager
+            };
 
             this.ref = {node};
             this.context.manager.add(collection, this.ref);