无法在GridPane中进行拖放操作 [英] Can't manage to do drag and drop in a GridPane

问题描述

我正在尝试在GridPane中拖放图像，但是虽然可以启动拖动操作，但我无法设法将图像放在另一个单元格上。

I am trying to do drag and drop of an image inside a GridPane, but though the drag operation could be started, I can't manage to get the image dropped on another cell.

我已经关注了这个例子。

这里我的Laucher.java：

Here my Laucher.java :

package app;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Launcher extends Application {

    @Override
    public void start(Stage primaryStage) {
        Scene scene = new Scene(new DraggableGrid());

        primaryStage.setTitle("Hello draggable grid !");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

这是我的DraggableGrid.java：

Here is my DraggableGrid.java :

package app;

import java.util.List;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.ClipboardContent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.TransferMode;
import javafx.scene.layout.GridPane;

public class DraggableGrid extends GridPane {

    public DraggableGrid(){
        final int CELL_SIZE = 60;
        for (int rank = 0; rank < 2; rank++){
            for (int file = 0; file < 2; file++){
                Group group = new Group();

                Image bgImage = new     Image(String.format("/app/images/%s_bg.jpg",
                        (file+rank) % 2 == 0 ? "green" : "dark"));
                ImageView bgImageView = new ImageView(bgImage);
                bgImageView.setFitWidth(CELL_SIZE);
                bgImageView.setFitHeight(CELL_SIZE);

                Image fgImage = (file+rank) == 0 ? 
                        new Image("/app/images/car.png") : null;
                ImageView fgImageView = new ImageView(fgImage);
                fgImageView.setFitWidth(CELL_SIZE);
                fgImageView.setFitHeight(CELL_SIZE);

                group.getChildren().addAll(bgImageView, fgImageView);
                add(group, file, rank);
            }
        }

        addDndFeature();
    }

    private void addDndFeature() {
        List<Node> children = getChildrenUnmodifiable();
        for (int rank = 0; rank < 2; rank++){
            for (int file = 0; file < 2; file++){
                Node currentNode = children.get(file + rank*2);
                ImageView currentNodeImageView = (ImageView) ((Group) currentNode)
                        .getChildren().get(1);
                Image cellImage = currentNodeImageView.getImage();
                currentNodeImageView.setOnDragDetected(event -> {
                    if (cellImage == null){
                        event.consume();
                    }
                    else {
                        Dragboard dragboard = currentNodeImageView
                                .startDragAndDrop(TransferMode.MOVE);

                        ClipboardContent clipboardContent = new ClipboardContent();
                        clipboardContent.putImage(cellImage);
                        dragboard.setContent(clipboardContent);

                        /////////////////////////
                        System.err.println("Drag started !");
                        ///////////////////////////

                        event.consume();
                    }
                });

                currentNodeImageView.setOnDragOver(event -> {
                    if (event.getGestureSource() != currentNodeImageView
                            && event.getDragboard().hasImage()){
                       event.acceptTransferModes(TransferMode.MOVE);
                       /////////////////////////
                        System.err.println("Drag accepted !");
                        ///////////////////////////
                    }
                    event.consume();
                });

                currentNodeImageView.setOnDragDropped(event -> {
                    Dragboard dragboard = event.getDragboard();
                    boolean success = false;

                    if (dragboard.hasImage()){
                        currentNodeImageView.setImage(dragboard.getImage());
                        success = true;
                    }

                    event.setDropCompleted(success);

                    /////////////////////////
                    System.err.println("Drag dropped !");
                    ///////////////////////////

                    event.consume();
                });

                currentNodeImageView.setOnDragDone(event -> {
                    if (event.getTransferMode() == TransferMode.MOVE){
                        ((ImageView)     event.getSource()).setImage(null);
                    }

                    /////////////////////////
                    System.err.println("Drag done !");
                    ///////////////////////////

                    event.consume();
                });
            }
        }
    }

}

事实上，只有StringsDrag start！和拖累！放在屏幕上，绕过接受和删除状态。

In fact, only the Strings "Drag started !" and "Drag done !" are put on screen, bypassing accepted and dropped states.

推荐答案

问题是你要添加 DragOver 和 DragDropped 事件处理程序到源（即前景）图像视图。它们应该被添加到目标（即背景）图像视图中：

The problem is you are adding the DragOver and DragDropped event handlers to the source (i.e. foreground) image views. They should be added to target (i.e. background) image views:

在循环中，获取目标图像视图：

In the loop, get the target image view:

ImageView targetNodeImageView = ( ImageView ) (( Group ) currentNode)
                            .getChildren().get( 0 );

然后添加linsteners：

then add linsteners:

targetNodeImageView.setOnDragOver(...);

targetNodeImageView.setOnDragDropped(...);

这篇关于无法在GridPane中进行拖放操作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！