react-dnd: drag out a line
<p>I am building a component that allows the user to build a graph with drag-n-drop. There is a node well where they can drag out new nodes, they can drag the nodes around the canvas, etc. </p>

<p>Now, I need to allow them to create edges by dragging from one node's output to the next node's input side. Strictly speaking this isn't drag-n-drop, because the draggable stays put and instead a line is to be displayed originating from the draggable and filling under the cursor, until eventually, when the user is releases while hovering over an active target, the edge is completed.</p>

<p>Drag-n-drop seems to do <em>almost</em> everything I want. It has the hover signal, highlighting drop targets when an eligible Draggable is dragging, and so forth. There are two things I can't figure out how to do. One is stop the draggable from moving at all. I can trick it by placing two copies of the element, one underneath the other, and then disabling the drag preview, but if there's a simple flag that would be better.</p>

<p>The other one seems like more of a show-stopper. The collect function doesn't continuously fire events as I drag (I know, by design). I need something that fires onMouseMove to keep updating the line. Since drag-n-drop does do some stuff I need, and since I've already incurred the size cost of depending on it, it'd be great to reuse it.</p>

<p>The best idea I've had so far is to install an onMouseMove handler on <code>beginDrag</code> and cleaning up the line on <code>endDrag</code>, establishing any new edge on <code>drop</code>. Unfortunately, I think something is stopping propagation of mousemove events, because my handler never fires even though I do enter the beginDrag here when I start dragging.</p>

<pre><code>     let mouseMoveHandler = (ev: JQueryMouseEventObject) =&gt; {
       console.log("Draw a line from ", node.position, " to ", { x: ev.clientX, y: ev.clientY });
     };
     console.log("Dragging");
     $("body").on("mousemove", mouseMoveHandler);
     return { id, node, mouseMoveHandler: mouseMoveHandler};
  },
  endDrag: ({id, node}, monitor: DragSourceMonitor) =&gt; {
    const item = monitor.getItem() as any;
    $("body").off("mousemove", item.mouseMoveHandler);
  }
</code></pre>