ともさんのHP >プロブラミング >JavaFX >JavaFXドラッグアンドドロップ

JavaFXドラッグアンドドロップ

JavaFXを用い、マウスでドラッグアンドドロップを実行するサンプルプログラムの紹介です。
2枚のPaneを並べ、Circleをマウスを使って隣のPaneへ移動させています。見た目は移動しているだけですが、 隣のPaneの上に移動すると、そのPaneにCircleをaddしています。


広告


準備

まずはPaneを2枚用意して並べます。

  pane[0] = new Pane();
  pane[1] = new Pane();
  pane[0].setBackground(new Background(new BackgroundFill( Color.LIGHTBLUE , CornerRadii.EMPTY , new Insets(5))));
  pane[1].setBackground(new Background(new BackgroundFill( Color.LAWNGREEN , CornerRadii.EMPTY , new Insets(5))));
  for(int i=0;i<pane.length;i++){ pane[i].setPrefSize(150, 150); }
  fpane.getChildren().addAll( pane );

Pane間にすきまがあるように見えますが、Insets(5)を採っているので実際には空いていません。

次にCircle。1つでよいのですが、寂しいので2つ用意しました。

  circle[0] = new Circle(0,0,10);
  circle[1] = new Circle(0,0,10);
  circle[0].setFill(Color.GREEN);
  circle[1].setFill(Color.RED);
  circle[0].setTranslateX(100);
  circle[0].setTranslateY(75);
  circle[1].setTranslateX(50);
  circle[1].setTranslateY(75);
  pane[0].getChildren().addAll( circle );


イベントの準備

Pane、Circleそれぞれにイベントを設定します。

private void setEvent(){
//Paneにイベントを設定
 EventHandler<MouseDragEvent> mouseDrag = ( event ) -> this.mouseDrag( event );
 for(int i=0;i<pane.length;i++){
  pane[i].addEventHandler( MouseDragEvent.MOUSE_DRAG_OVER, mouseDrag );
 }
//サークルにイベントを設定
EventHandler<MouseDragEvent> mouseReleased = ( event ) -> this.mouseReleased( event );
EventHandler<MouseEvent> mouseDragDetected = ( event ) -> this.mouseDetected( event );
for(int i=0;i<circle.length;i++){
circle[i].addEventHandler( MouseDragEvent.MOUSE_DRAG_RELEASED, mouseReleased );
circle[i].addEventHandler( MouseEvent.DRAG_DETECTED, mouseDragDetected );
}
}

ドラッグされる側、Circleには、
MouseEvent.DRAG_DETECTED マウスドラッグを検知
MouseDragEvent.MOUSE_DRAG_RELEASED マウスドラッグ終了
の2つのイベントを設定します。
ドラッグを受ける側、Paneには、
MouseDragEvent.MOUSE_DRAG_OVER
を設定します。

イベント発生の順序

Circle上でマウスボタンが押し、押したままマウスを動かすと、MouseEvent.DRAG_DETECTEDイベントが発生します。
まず、マウスの形状とCircleの色を変え、押されたCircleをとっておきます。

  //アクティブサークルの設定
  activecircle = (Circle)event.getSource();
  //ドラッグ中の色とマウス形状を変更
  activecircle.setBlendMode( BlendMode.OVERLAY);
  scene.setCursor( Cursor.CLOSED_HAND);

このイベントの中で下記1文を加えると、以降MouseDragEventが有効になります。

    activecircle.startFullDrag();


ことあと、ボタン楽天 を押したままマウスを動かすとCircleののっているPaneでMouseDragEvent.MOUSE_DRAG_OVERイベントが発生します。
このイベントはPaneの範囲外にマウスが出ても発生してしまいます。領域外であれば何もせずに戻るように設定しておきます。

 if( p.getLayoutBounds().contains(e.getX(),e.getY()) ==false ){ return; }

マウスが隣のPaneに移ったときは、Circleも隣に移します。

 if( p.getChildren().contains(activecircle)==false ){  p.getChildren().add( activecircle ); }

Circleの位置をマウスの位置に一致させ、マウスの動きに追従させます。

 activecircle.setTranslateX( e.getX() );
 activecircle.setTranslateY( e.getY() );


マウスボタンを離すと、MouseDragEvent.MOUSE_DRAG_RELEASEDイベントが発生して、以降MouseDragEventも無効になります。
Circleの色とマウス形状を元に戻して、ドラッグアンドドロップ終了です。

 activecircle.setBlendMode( BlendMode.SRC_OVER);
 scene.setCursor( Cursor.DEFAULT);

広告


サンプルプログラム

ページトップの動画のソースコードは以下の通り。
JavaFXマウスドラッグアンドドロップ

package tomojavalib.swingfx;

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Cursor;
import javafx.scene.Scene;
import javafx.scene.effect.BlendMode;
import javafx.scene.input.MouseDragEvent;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class DragTestFx extends Application {
Pane[] pane = new Pane[2];
Circle[] circle = new Circle[2];
Circle activecircle = null;
Scene scene = null;

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

 @Override
 public void start(Stage stage) throws Exception {
  stage.setTitle("JavaFX楽天 ");
  FlowPane fpane = new FlowPane();
  scene = new Scene(fpane, 320, 240);
  //Paneを二つ準備する
  pane[0] = new Pane();
  pane[1] = new Pane();
  pane[0].setBackground(new Background(new BackgroundFill( Color.LIGHTBLUE , CornerRadii.EMPTY , new Insets(5))));
  pane[1].setBackground(new Background(new BackgroundFill( Color.LAWNGREEN , CornerRadii.EMPTY , new Insets(5))));
  for(int i=0;i<pane.length;i++){ pane[i].setPrefSize(150, 150); }
  fpane.getChildren().addAll( pane );
  circle[0] = new Circle(0,0,10);
  circle[1] = new Circle(0,0,10);
  circle[0].setFill(Color.GREEN);
  circle[1].setFill(Color.RED);
  circle[0].setTranslateX(100);
  circle[0].setTranslateY(75);
  circle[1].setTranslateX(50);
  circle[1].setTranslateY(75);
  pane[0].getChildren().addAll( circle );
  stage.setScene(scene);
  this.setEvent();
  stage.show();
 }

private void setEvent(){
//Paneにイベントを設定
 EventHandler<MouseDragEvent> mouseDrag = ( event ) -> this.mouseDrag( event );
 for(int i=0;i<pane.length;i++){
  pane[i].addEventHandler( MouseDragEvent.MOUSE_DRAG_OVER, mouseDrag );
 }
//サークルにイベントを設定
EventHandler<MouseDragEvent> mouseReleased = ( event ) -> this.mouseReleased( event );
EventHandler<MouseEvent> mouseDragDetected = ( event ) -> this.mouseDetected( event );
for(int i=0;i<circle.length;i++){
circle[i].addEventHandler( MouseDragEvent.MOUSE_DRAG_RELEASED, mouseReleased );
circle[i].addEventHandler( MouseEvent.DRAG_DETECTED, mouseDragDetected );
}
}


private void mouseDetected(MouseEvent event) {
    System.out.println("drag detected");
  //アクティブサークルの設定
  activecircle = (Circle)event.getSource();
  //ドラッグ中の色とマウス形状を変更
  activecircle.setBlendMode( BlendMode.OVERLAY);
  scene.setCursor( Cursor.CLOSED_HAND);
    //ドラッグ開始
    activecircle.startFullDrag();
    event.consume();
}

private void mouseReleased( MouseDragEvent event) {
 System.out.println("mouse released");
 event.consume();
 //サークルの色とマウスの形状を元に戻す
 activecircle.setBlendMode( BlendMode.SRC_OVER);
 scene.setCursor( Cursor.DEFAULT);
}

private void mouseDrag( MouseEvent e){
 Pane p = (Pane)e.getSource();
 //マウスがパネル領域内に無ければリターン
 if( p.getLayoutBounds().contains(e.getX(),e.getY()) ==false ){ return; }
 e.consume();
 String s = p.toString();
 System.out.println( "マウスドラッグ:"+s +" "+ e.getX() +" "+ e.getY() );
 //Pane内にサークルが無ければ追加する
 if( p.getChildren().contains(activecircle)==false ){  p.getChildren().add( activecircle ); }
 //サークルの位置を変更
 activecircle.setTranslateX( e.getX() );
 activecircle.setTranslateY( e.getY() );
}

}

最終更新日: 2018-12-04 08:32:23

ともさんのHP >プロブラミング >JavaFX >JavaFXドラッグアンドドロップ

このエントリーをはてなブックマークに追加
広告
おすすめ記事
新着ページ

雨樋の補修  
新幹線で車中泊体験  
竹収納棚  
竹を曲げる方法  
【家庭菜園】輪作プラン  
電磁パルス(EMP)対策  
薪ストーブの故障  
体温発電を考えてみる  
新幹線の旅  
アイマスクの作りかた  
布生地を織布工場から購入  

私の他のサイト

ともさんの箱庭(ブログ)
家庭菜園
3D-CAD
洋裁CAD

いいねなど

 RSS 

Author: Tomoyuki Ito

このサイトの文章・写真の無断転載を禁じます