Drag N Drop Gambar dalam scene

Hello guys, kali ini kita akan membahas tentang cara mendrag gambar agar dapat digerak-gerakkan pada scene.

Baiklah, langsung kita mulai saja, ikuti langkah di bawah ini :

1.       Buka Netbeans
2.       Buat project baru bernama “DragNDropGambar”.
3.       Setelah itu unduh gambar yang dengan resolusi 48 ke atas.
4.       Ketikkan kode di bawah ini:

public class DragNDropGambar extends Application {
    private double startDragX;
    private double startDragY;
    private Point2D dragAnchor;

    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();

        Image gambar = new Image(getClass().getResourceAsStream("gambar.png"));
        ImageView imageView = new ImageView(gambar);   
        imageView.setFitWidth(100);
        imageView.setFitHeight(100);

        // menambahkan listeners kepada imageView agar support dragging
        imageView.setOnMousePressed(new EventHandler() {
            public void handle(MouseEvent me) {
                imageView.toFront();
                startDragX = imageView.getTranslateX();
                startDragY = imageView.getTranslateY();
                dragAnchor = new Point2D(me.getSceneX(), me.getSceneY());
            }
        });

        imageView.setOnMouseDragged(new EventHandler() {
            public void handle(MouseEvent me) {
                System.out.println(imageView.getTranslateX());
                double newTranslateX = startDragX
                        + me.getSceneX() - dragAnchor.getX();
                double newTranslateY = startDragY
                        + me.getSceneY() - dragAnchor.getY();

                imageView.setTranslateX(newTranslateX);
                imageView.setTranslateY(newTranslateY);

            }
        });

        root.getChildren().add(imageView);

        Scene scene = new Scene(root, 300, 300);

        primaryStage.setTitle("DragNDropGambar");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Pertama-tama deklarasikan variable bertipe double yaitu startDragX dan startDragY . Variabel ini digunakan untuk menyimpan posisi awal X danY gambar sewaktu akan didrag. Kemudian deklarasikan variabel bertipe Point2D yaitu dragAnchor. Variabel ini digunakan untuk menyimpan posisi awal mouse waktu melakukan drag.

Kemudian kita buat objek Stackpane bernama root. StackPane adalah sebuah pane dimana menyusun childnya dengan menumpuk, mirip seperti CardLayout pada Swing. Kemudian buat objek Image dan ImageView untuk menampung gambar.

StackPane root = new StackPane();
Image gambar = new Image(getClass().getResourceAsStream("sum48.png"));
ImageView imageView = new ImageView(gambar);

Kemudian tambahkan EventHandler MousePressed pada imageView, dimana didalamnya terdapat perintah untuk menyimpan nilai ke variable yang kita deklarasikan di awal tadi.

imageView.setOnMousePressed(new EventHandler<MouseEvent>() {
public void handle(MouseEvent me) {

imageView.toFront();
startDragX = imageView.getTranslateX();
startDragY = imageView.getTranslateY();
dragAnchor = new Point2D(me.getSceneX(), me.getSceneY());
}

});

Kemudian tambahkan EventHandler MouseDragged pada imageView, dimana di dalamnya terdapat perintah untuk mendapatkan lokasi translateX dan Y sekarang

imageView.setOnMouseDragged(new EventHandler<MouseEvent>() {

public void handle(MouseEvent me) {

System.out.println(imageView.getTranslateX());

double newTranslateX = startDragX + me.getSceneX() - dragAnchor.getX();

double newTranslateY = startDragY + me.getSceneY() - dragAnchor.getY();

imageView.setTranslateX(newTranslateX);

imageView.setTranslateY(newTranslateY);

}

});

Kemudian tambahkan mouse ke root dan run, coba klik gambar dan pindahkan lokasinya.

Gimana??