I'm attempting to insert several draggable entries into an Accordion's TitledPane in JavaFX.

我正在尝试将几个可拖动的条目插入到JavaFX中手风琴的标题面板中。

There is a class function setContent of the TitledPane class that I can call in Java, and I can provide it something like a Label to it, which will result in the single label being displayed as the single entry of the TitledPane, as such:

我可以在Java中调用TitledPane类的类函数setContent，我可以为它提供类似标签的东西，这将导致单个标签显示为标题窗格的单个条目，如下所示：

titledPane.setText("Test TitledPane");
titledPane.setContent(new Label("Test Label"));`

However, I'm looking to insert several entries into the TitledPane, not just one.

然而，我希望在标题窗格中插入几个条目，而不是一个。

Every single tutorial on TitledPane and Accordion I saw only show how to create them with initial permanent values, and not how to dynamically insert values into them as needed.

我看到的每一个关于标题面板和Accordion的教程都只展示了如何用初始的永久值来创建它们，而不是如何根据需要动态地向其中插入值。

How would I go about inserting several values into a TitledPane dynamically using Java? What label type would I need to make these entries in order to allow them to be draggable by the user's cursor?

我该如何使用Java将多个值动态插入到一个标题窗格中呢？我需要设置哪些标签类型才能使这些条目可由用户的光标拖动？

Content:

1. Adding several items into a TabPane


2. Moving elements across the UI with the mouse

1. Several Items into Tab Pane

If you want to insert several GUI components to a titled pane, you could create a separate LayoutContainer that contains all your desired GUI components and subsequently add it to your TitledPane using setContent(LayoutContainer). Choose the layout that matches your desired design.

如果您想要在标题面板中插入几个图形用户界面组件，您可以创建一个单独的LayoutContainer，其中包含您想要的所有图形用户界面组件，然后使用setContent(LayoutContainer)将其添加到标题面板中。选择与所需设计相匹配的布局。

Example: Creating several components using a VBox for a simple design

示例：使用VBox创建多个组件以实现简单设计

TitledPane pane = new TitledPane();
pane.setText("Test TitledPane");
            
VBox box = new VBox(20);
box.getChildren().addAll(new Label("I am a Label"), new Button("I am a button"), new CheckBox("Click me"));
            
pane.setContent(box); //add the VBox with the elements to the Tab
            
            
Scene scene = new Scene(pane,500, 500);    scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

That's the result:

这就是结果：

Now if you'd like your GUI to look more user-friendly, sophisticated and modern, you can still add more Layout Containers containing more components to the Pane by adding the Containers to other Containers.

现在，如果您希望您的图形用户界面看起来更友好、更复杂和更现代，您仍然可以通过将容器添加到其他容器来将包含更多组件的更多布局容器添加到面板中。

2. Drag element across the screen

In this example, I added just a label to the TabPane. Using this code, you can move the label as you wish across the entire tab.

在本例中，我只向Tabbet添加了一个标签。使用此代码，您可以在整个选项卡中随意移动标签。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class Main extends Application {

    private double xOffset = 0;
    private double yOffset = 0;

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Draggable Tab with Label Example");

        TabPane tabPane = new TabPane();

        // Create a tab with a label
        Tab tab = new Tab("Draggable Tab");
        Pane tabContent = new Pane();

        Label label = new Label("Drag me");
        label.setStyle("-fx-background-color: lightblue; -fx-padding: 10px;");

        tabContent.getChildren().add(label);
        tab.setContent(tabContent);
        
        tabPane.getTabs().add(tab);

        Scene scene = new Scene(tabPane, 400, 300);

        label.setOnMousePressed(this::onMousePressed);
        label.setOnMouseDragged(this::onMouseDragged);
        label.setOnMouseReleased(this::onMouseReleased);

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void onMousePressed(MouseEvent event) {
        xOffset = event.getSceneX() - ((Label) event.getSource()).getLayoutX();
        yOffset = event.getSceneY() - ((Label) event.getSource()).getLayoutY();
    }

    private void onMouseDragged(MouseEvent event) {
        double x = event.getSceneX() - xOffset;
        double y = event.getSceneY() - yOffset;

        Label label = (Label) event.getSource();
        label.setLayoutX(x);
        label.setLayoutY(y);
    }

    private void onMouseReleased(MouseEvent event) {
        // Optionally, you can add cleanup code here
    }
}

You can apply this code to other elements by assigning the respective methods to your desired element.

通过将相应的方法分配给所需的元素，可以将此代码应用于其他元素。