JavaFX Scene Builder -- Drag-And-Drop Between Parent Nodes
<p>I am using FXML alongside Scene Builder to develop a very simple interface. Below, the first image represents the layout hierarchy. The second image displays a text area when the button is pressed. </p>

<p>The action event method instantiates a new text area and assigns it to the first flow pane (left to right). My goal is to drag and drop each text area to any of the other flow panes.  </p>

<p>My first attempt was to use assign use an Event handler to detect MOUSE_PRESSED: <code>textArea.addEventHandler(MouseEvent.DRAG_DETECTED, e-&gt; handle(e));</code></p>

<p>When I got to setting up the handle method, things got confusing. For example, should I included the other various MouseEvent's, such as MOUSE_EXITED_TARGET, MOUSE_ENTERED_TARGET? And how is the MOUSE_RELEASED handle composed?  </p>

<p>I started to look at Dragboard and Clipboard, and didn't find much luck there either. Clipboard only seemed capable of handling string values, or in a roundabout sort of way, images. I'm sure there is a simple answer to my predicament, as it clearly shows I'm wondering around in uncharted territory.  </p>

<p>I've read through several "textbook" resources, but they all address the movement of objects that are constructed at runtime, and most conform to what appear to be generic or straightforward examples. </p>

<p><strong>NOTE</strong> 
I apologize for the images, I realize it isn't quite clear. There are 5 flow panes distributed across the grid pane. I will try to edit and update it shortly.</p>

<p><a href="https://i.stack.imgur.com/8bAup.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8bAup.png" alt="initial interface hierarchy"></a>
<a href="https://i.stack.imgur.com/qNpJX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qNpJX.png" alt="after button is pressed"></a></p>