ドラッグ＆ドロップによる操作を実装したい

画面操作 - マウス

ドラッグ＆ドロップによる操作を実装したい

ドラッグ＆ドロップ操作はDragSourceクラス、DisplayObjectクラスのacceptDropプロパティ、Droppedイベントを利用して実装することが可能です。

Biz/Browser DTのドラッグ＆ドロップ機能では下記の3種類のデータ形式を扱うことが可能です。

１.	DROP_FILE
	エクスプローラ等からのファイルのドロップを受け取ります [使用例] 任意のファイルを選択状態にして、Labelオブジェクトへドラッグ＆ドロップしファイルのデータを表示
２.	DROP_STRING
	Word等からのテキストの編集ドロップを受け取ります [使用例] 任意のテキストを選択状態にして、Labelオブジェクトへドラッグ＆ドロップし編集データを表示
３.	DROP_OBJECT
	オブジェクトを参照形式で受け取ります [使用例] テキストボックスの入力値をドラッグ＆ドロップで他のオブジェクトにコピー

下記サンプルでは、１と３を利用したドラッグ＆ドロップ操作を実装しています。

Form form1 {
	width = 449;
	height = 393;
	
	Label label3 {
		x = 24;
		y = 16;
		width = 312;
		height = 40;
		value = "【 ファイルのドロップ 】\n（文字コードがUTF-8のテキストファイルをドロップしてください）";
	}
   
	Label label2 {
		x = 24;
		y = 64;
		width = 128;		
		bgColor = "CYAN" ;
		border = BORDER_DASH ;
		value = "ここにテキストファイルを\nドロップ";
		
		/*ドラッグ＆ドロップを受け付けるタイプを指定（ファイル）*/
		acceptDrop = DROP_FILE;
		
		function OnDropped(e) {
			/*ドロップされたテキストファイルのデータを表示*/
			^.EditBox1.value = e.Data.Read();
		}
	}

	EditBox EditBox1 {
	   x = 168;
	   y = 64;
	   width = 200;
	   title = "内容表示" ;
	}  

	Label label4 {
		x = 24;
		y = 200;
		width = 312;
		height = 24;
		value = "【 オブジェクトのドロップ 】";
	}

	/* ドロップ元のオブジェクト(Value) */
	TextBox ValueObject[3] {
		x = 16;
		y = 240;
		Width = 60;
		Height = 24;
		Layout = LAYOUT_HORIZONTAL;

		this[0].Value = "あいうえお";
		this[1].Value = "abcde";
		this[2].Value = 12345;

		Function OnClicked( e ) {
			/* 自分自身をドラッグオブジェクトに設定してドラッグを開始します */
		   var ds = new DragSource;
		   ds.setObject( this );
		   ds.doDragDrop( );
		}
	}

	/* ドロップ元のオブジェクト(BgColor) */
	Label BgColorObject[3] {
		x = 16;
		y = 288;
		Width = 56;
		Height = 24;
		Layout = LAYOUT_HORIZONTAL;
		this[0].bgColor = Color.RED;
		this[0].Value = "Red";
		this[1].bgColor = Color.BLUE;
		this[1].bgColor = "Blue";
		this[2].bgColor = Color.YELLOW;
		this[2].Value = "Yellow";

		Function OnClicked( e ) {
			/* 自分自身をドラッグオブジェクトに設定してドラッグを開始します */
			var ds = new DragSource;
			ds.setObject( this );
			ds.doDragDrop();
		}
	}
   Label Label17 {
           x = 208;
           y = 248;
           width = 16;
           Height = 24;
           Value = "→";
   }
   Label Label1 {
           x = 208;
           y = 296;
           width = 16;
           Height = 24;
           Value = "→";
   }

   /* ドロップ先のオブジェクト */
	Label lbl_drop {
		x = 237;
		y = 234;
		width = 178;
		Height = 130;
		Value = "左側のオブジェクトをドラッグし、ここへドロップします";
		Border = true;
		bgColor = Color.WHITE;
		
		/*ドラッグ＆ドロップを受け付けるタイプを指定（オブジェクト）*/
		acceptDrop = DROP_OBJECT;

		Function OnDropped( e ) {
			if(e.data instanceof TextBox){
				/*TextBoxをドロップされた場合、値を表示*/
				value = e.data.value;
			}else if(e.data instanceof Label){
				/*Labelをドロップされた場合、背景色を変更*/
				bgColor = e.data.bgColor;
			}
		}
	}
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ