Merge pull request clauderic#127 from DeadHeadRussell/master

fix: children elements in nested lists drag parent elements.

Author: Claudéric Demers

src/.stories/Storybook.scss

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

src/.stories/index.js

@@ -23,16 +23,28 @@ function getItems(count, height) {
 const Handle = SortableHandle(() => <div className={style.handle}></div>);
 
 const Item = SortableElement((props) => {
-    return (
-        <div className={props.className} style={{
-            height: props.height
-        }}>
+	return (
+		<div className={props.className} style={{
+			height: props.height
+		}}>
 			{props.shouldUseDragHandle && <Handle/>}
 			<div className={style.wrapper}>
-	            <span>Item</span> {props.value}
+				<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>
-        </div>
-    )
+			<ListWrapper component={SortableList} className={style.categoryList} items={getItems(3, 59)} shouldUseDragHandle={true} helperClass={style.stylizedHelper} />
+		</div>
+	)
 });
 
 class ListWrapper extends Component {
@@ -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,11 @@ 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);