Wsrtjtyk

I have 2 draggable StackPanes and between these is a line shape. When I drag one stack pane the end of the line next to the moving StackPane moves accordingly to the moving stack pane and the other side of the line stays still (which is what I want). However my problem is when I release the mouse i.e stop dragging the stack pane, the line goes back to its original position.

My event handler when you press the StackPane:

EventHandler<MouseEvent> circleOnMousePressedEventHandler = 

            new EventHandler<MouseEvent>() {



            @Override

            public void handle(MouseEvent t) {



                currentStackPane  = ((StackPane)(t.getSource()));

                orgSceneX = t.getSceneX();

                orgSceneY = t.getSceneY();

                layoutX =  currentStackPane.getLayoutX();

                layoutY =  currentStackPane.getLayoutY();



            }

        };

My event handler when i drag the StackPane:

EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = 

            new EventHandler<MouseEvent>() {



            @Override

            public void handle(MouseEvent t) {





                double offsetX = t.getSceneX() - orgSceneX;

                double offsetY = t.getSceneY() - orgSceneY;

                currentStackPane.setTranslateX(offsetX);

                currentStackPane.setTranslateY(offsetY);

             }

        };

I tried make a event handler after the drag is finished:

EventHandler<MouseEvent> circleOnMouseReleasedEventHandler = 

            new EventHandler<MouseEvent>() {



            @Override

            public void handle(MouseEvent t) {



                currentStackPane.setLayoutX(layoutX + ((StackPane)(t.getSource())).getTranslateX());

                currentStackPane.setLayoutY(layoutY + ((StackPane)(t.getSource())).getTranslateY());

                currentStackPane.setTranslateX(0);

                currentStackPane.setTranslateY(0);

        }

};

Binding the start and end points to the stackpanes:

DoubleProperty startX = new SimpleDoubleProperty(vertexClickedOn.getLayoutX() + (vertexClickedOn.getWidth() / 2)); 

DoubleProperty startY = new SimpleDoubleProperty(vertexClickedOn.getLayoutY() + (vertexClickedOn.getHeight() / 2)); 

DoubleProperty endX = new SimpleDoubleProperty(vertexTo.getLayoutX() + (vertexTo.getWidth() / 2));

DoubleProperty endY = new SimpleDoubleProperty(vertexTo.getLayoutY() + (vertexTo.getHeight() / 2));



line.startXProperty().bind(startX.add(vertexClickedOn.translateXProperty()));    

line.startYProperty().bind(startY.add(vertexClickedOn.translateYProperty())); 

line.endXProperty().bind(endX.add(vertexTo.translateXProperty()));

line.endYProperty().bind(endY.add(vertexTo.translateYProperty()));

However if i take this out then the line stays where the mouse is released but the dragged stackpane goes back to its original position when the mouse released. If i keep this in then the stackpane stays where the mouse is released but the line goes back to it's original position.

How do I solve this?

Thank you.

The root cause for your problem is the startX/Y and endX/Y values are not updated with the new layoutX/Y values. Rather than taking into a separate variable, I would recommend to include them in the binding.

line.startXProperty().bind(vertexClickedOn.layoutXProperty().add(vertexClickedOn.translateXProperty()).add(vertexClickedOn.widthProperty().divide(2)));

line.startYProperty().bind(vertexClickedOn.layoutYProperty().add(vertexClickedOn.translateYProperty()).add(vertexClickedOn.heightProperty().divide(2)));

line.endXProperty().bind(vertexTo.layoutXProperty().add(vertexTo.translateXProperty()).add(vertexTo.widthProperty().divide(2)));

line.endYProperty().bind(vertexTo.layoutYProperty().add(vertexTo.translateYProperty()).add(vertexTo.heightProperty().divide(2)));