title: JavaFX - Notify when user drags mouse from one Node to another?
body: <p>I have the following basic GUI for demonstration:</p>
  
  <p><a href="https://i.stack.imgur.com/CZadU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CZadU.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to achieve the following functionality but I've exhausted all avenues that I've attempted.</p>
  
  <blockquote>
    <p>User can left click on any of the ImageView's and it will create an
    arrow that follows the user's cursor around until the user let's go of
    the mouse button. (arrow start x,y is where he clicked and end x,y is
    where his mouse currently is) If the user clicked on the Red
    <code>ImageView</code> and dragged it over the Blue <code>ImageView</code> and then let go,
    the program would print <code>User just clicked from R to B</code></p>
    
    <p>If the user clicked on the Red <code>ImageView</code> and let go of the mouse but
    was not over a different <code>ImageView</code>, the program would print <code>User
    just clicked from R but did not target a different ImageView</code>.</p>
    
    <p>Under all circumstances, the arrow will appear when the user clicks on
    the <code>ImageView</code> and will disappear the second he lets go of the mouse.</p>
  </blockquote>
  
  <pre><code>import javafx.application.Application;
  import javafx.scene.Scene;
  import javafx.scene.image.Image;
  import javafx.scene.image.ImageView;
  import javafx.scene.layout.Pane;
  import javafx.scene.shape.Line;
  import javafx.stage.Stage;
  
  import java.util.HashMap;
  
  public class Test extends Application
  {
      public static int HEIGHT = 500, WIDTH = 600;
  
      @Override
      public void start(Stage primaryStage) throws Exception
      {
          ImageView blue = new ImageView(new Image("blue.png")),
                  red = new ImageView(new Image("red.png")),
                  dark = new ImageView(new Image("dark.png"));
  
          // Final array as to bypass the `final` requirement of event handler inner classes.
          final ImageView[] hoveredOver = new ImageView[1];
          final Line[] linePtr = new Line[1];
          linePtr[0] = new Line();
          linePtr[0].setStrokeWidth(10);
  
          HashMap&lt;ImageView, Character&gt; lookup = new HashMap&lt;ImageView, Character&gt;(3)
          {{
                  put(blue, 'B');
                  put(red, 'R');
                  put(dark, 'D');
              }};
  
          for (ImageView i : new ImageView[] { blue, red, dark })
          {
              i.setFitWidth(150);
              i.setFitHeight(150);
  
              // Set the anchor points of the click and display the arrow.
              i.setOnMousePressed(e -&gt; {
                  linePtr[0].setStartX(e.getX());
                  linePtr[0].setStartY(e.getY());
                  linePtr[0].setVisible(true);
              });
              // Move the arrow as the mouse moves.
              i.setOnMouseDragged(e -&gt; {
                  linePtr[0].setEndX(e.getX());
                  linePtr[0].setEndY(e.getY());
              });
              i.setOnMouseReleased(e -&gt; {
                  // Not null means that the user WAS actually just now hovering over an imageview.
                  if (hoveredOver[0] != null)
                      System.out.printf("The user clicked from %c to %c!\n", lookup.get(i), lookup.get(hoveredOver[0]));
                      // Null means the user is not over an ImageView.
                  else
                      System.out.printf("The user initially clicked %c but did not drag to another Imageview.\n", lookup.get(i));
                  linePtr[0].setVisible(false);
              });
              // If the user enters ANY of the ImageViews,
              // Set a variable so that the drag release listener
              // can know about it!
              i.setOnMouseDragOver(e -&gt; hoveredOver[0] = i);
              i.setOnMouseDragExited(e -&gt; hoveredOver[0] = null);
          }
  
          blue.setX(400);
          blue.setY(250);
  
          red.setY(300);
          red.setX(50);
  
          /*
          In this example I'm using a Pane but in my real program
          I might be using a VBOX HBOX etc where I cannot freely move stuff around as I'd like.
          This makes things extremely difficult and without using a 'Pane'
          I don't know how this can even be done. Suggestions?
           */
          Pane pneRoot = new Pane(blue, red, dark, linePtr[0]);
          Scene scene = new Scene(pneRoot, WIDTH, HEIGHT);
          primaryStage.setScene(scene);
          primaryStage.show();
      }
  
      public static void main(String[] args)
      {
          launch(args);
      }
  }
  </code></pre>
  
  <p>This was my best attempt and it's not even close. It moves a line (not an arrow, and ideally I want my arrow to curve as it moves much like <a href="http://i69.photobucket.com/albums/i68/WizzleStaghelm/target1.png" rel="nofollow noreferrer" title="this example">this example image from a popular video game</a>) but does not suit my needs. It cannot detect however when I let go while 'dragging over' an ImageView.</p>
  
  <p>Is there a better way to do this? I feel like I can't simply the code I have down any further but there <strong>MUST</strong> be another way. </p>