JavaFX中实现Shape跨Pane拖拽功能的技术求助

Hey there! I totally get how frustrating it is to hit a wall with drag-and-drop even after digging through every resource you can find. Let’s walk through exactly how to get those left-side Shapes dragging into your right-side SimplePane— I’ve worked through this exact scenario before, so let’s break it down step by step.

First: Update Your FXML #

You mentioned you’ve set up the SplitPane with a Shape on the left and SimplePane on the right. Let’s add the necessary event handlers to your FXML elements so JavaFX knows when to trigger drag actions:

<!-- Example left-side Shape (adjust to match your actual Shape type) -->
<Rectangle fx:id="useCaseShape" width="100" height="60" fill="#e0e0e0" 
           stroke="#333" strokeWidth="2"
           onDragDetected="#handleDragDetected" />

<!-- Right-side target SimplePane -->
<SimplePane fx:id="targetPane" 
            style="-fx-background-color: #f5f5f5;"
            onDragOver="#handleDragOver"
            onDragDropped="#handleDragDropped" />

Make sure to link your FXML to your controller in Scene Builder (under the "Controller" tab) and match the fx:id values to the variable names in your controller class.

Next: Add Drag-and-Drop Logic to Your Controller #

JavaFX drag-and-drop relies on key events— let’s implement each one in your controller to make the drag work smoothly:

import javafx.scene.input.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.layout.SimplePane;

public class DiagramController {
    // Match these fx:id variables to your FXML elements
    public Rectangle useCaseShape;
    public SimplePane targetPane;

    // Triggered when the user starts dragging the Shape
    public void handleDragDetected(MouseEvent event) {
        // Initialize the dragboard to carry data
        Dragboard dragboard = useCaseShape.startDragAndDrop(TransferMode.COPY);
        ClipboardContent content = new ClipboardContent();
        
        // We'll use a string to identify the type of shape being dragged
        content.putString("USE_CASE_SHAPE");
        dragboard.setContent(content);
        
        event.consume();
    }

    // Triggered when the drag enters the target pane
    public void handleDragOver(DragEvent event) {
        // Check if the dragged content is what we expect
        if (event.getGestureSource() != targetPane && 
            event.getDragboard().hasString() && 
            event.getDragboard().getString().equals("USE_CASE_SHAPE")) {
            // Allow the user to drop the shape here
            event.acceptTransferModes(TransferMode.COPY);
        }
        event.consume();
    }

    // Triggered when the user releases the mouse to drop the shape
    public void handleDragDropped(DragEvent event) {
        Dragboard dragboard = event.getDragboard();
        boolean dropSuccess = false;

        if (dragboard.hasString() && dragboard.getString().equals("USE_CASE_SHAPE")) {
            // Clone the original shape (adjust this if you're using a custom Shape)
            Rectangle newUseCaseShape = new Rectangle();
            newUseCaseShape.setWidth(useCaseShape.getWidth());
            newUseCaseShape.setHeight(useCaseShape.getHeight());
            newUseCaseShape.setFill(useCaseShape.getFill());
            newUseCaseShape.setStroke(useCaseShape.getStroke());
            newUseCaseShape.setStrokeWidth(useCaseShape.getStrokeWidth());

            // Position the new shape where the user dropped it (centered on mouse)
            newUseCaseShape.setX(event.getX() - newUseCaseShape.getWidth() / 2);
            newUseCaseShape.setY(event.getY() - newUseCaseShape.getHeight() / 2);

            // Add the new shape to the target pane
            targetPane.getChildren().add(newUseCaseShape);
            dropSuccess = true;
        }

        // Tell the drag source whether the drop worked
        event.setDropCompleted(dropSuccess);
        event.consume();
    }
}

Key Notes to Avoid Pitfalls #

• Custom Shapes? If you’re using a custom Shape subclass instead of a built-in one (like Rectangle), you’ll need to adjust the cloning logic to copy all your custom properties, or serialize the shape data to pass via the dragboard.
• Event Binding Double-Check: Make sure in Scene Builder that each onDragXXX attribute is linked to the correct method in your controller— it’s easy to mistype a method name and break the connection.
• Transfer Modes: I used TransferMode.COPY here (since you’re building a diagram generator, you probably want multiple copies of the shape). If you want to move the shape instead, use TransferMode.MOVE and remove the original shape in the handleDragDone event.

Give this setup a test run— you should see the cursor change when you drag the shape over the target pane, and a copy of the shape should appear where you release the mouse. If you hit snags (like events not firing or shapes not rendering right), feel free to share more details about your specific setup!

内容的提问来源于stack exchange，提问作者Reherischef