         <Component {...@props} />
   )
 
+  # The lodash `flow` function is essentially a chain, passing the return
+  # value of each function to the next. Note here that DragSource() and
+  # DragTarget() both return functions which are then used in the flow.
   _.flow(
-    DragSource(Type, dragSource, sourceConnect),
-    DropTarget(Type, dragTarget, targetConnect)
+    DragSource(Type, dragSourceSpec, sourceConnect),
+    DropTarget(Type, dragTargetSpec, targetConnect)
   )(Reorderable)

DragSource        = RDnD.DragSource
DropTarget        = RDnD.DropTarget

module.exports = (Component, Type, MoveFunction) ->
  dragSource =
    beginDrag: (props) ->
      props[Type]
    isDragging: (props, monitor) ->

      else
        true

  # Returns props to inject into the draggable component
  sourceConnect = (connect, monitor) ->
    connectDragSource: connect.dragSource()
    isDragging: monitor.isDragging()

  # These functions allow us to modify how the
  # drag target reacts to drag-and-drop events
  dragTargetSpec =
    hover: (props, monitor) ->
      item = monitor.getItem()
      props[MoveFunction](item.id, props[Type].id)

  # Returns props to inject into the drag target component
  targetConnect =  (connect, monitor) ->
    connectDropTarget: connect.dropTarget()

  # Simple wrapper for rendering the passed Component as draggable or not
  Reorderable = React.createClass(
    displayName: 'Reorderable'
    render: ->
