DragList (드래그리스트) Widget Control

DragListウィジェットをスクリプトから制御するときに使用するWidget Control（Property · Method · Event）の一覧です。ウィジェットの紹介と使い方はDragListドキュメントを参照してください。

備考

以下の例のdraglistIDは、キャンバスでDragListウィジェットに指定した名前（ID）です。スクリプトではwidgetID.memberの形式でアクセスします。

Widget Control一覧

Widget Control	種類	シグネチャ	説明
add	Method	add() → 整数	末尾に空のアイテムを追加し、新しいインデックスを返す
clear	Method	clear()	すべてのアイテムを削除
count	Property	count（読み書き、整数）	繰り返しレンダリングするアイテム数。値を書き込むとバインディングリストの長さを合わせて再描画する
current	Property	current（読み書き、整数）	バインディングスコープとして使う現在のアイテムインデックス。ない場合は-1
insert	Method	insert(index)	指定した位置に空のアイテムを挿入
onMultiReorder	Event	onMultiReorder = (indices, newIndex) => { ... }	選択した複数のアイテムをまとめて移動したとき
onReorder	Event	onReorder = (oldIndex, newIndex) => { ... }	アイテムを1つドラッグして移動したとき
onReorderEnd	Event	onReorderEnd = (index) => { ... }	ドラッグによる並べ替えが終わったとき
onReorderStart	Event	onReorderStart = (index) => { ... }	ドラッグによる並べ替えが始まるとき（selectWidgetIdを指定した場合のみ発火）
onScrollEnd	Event	onScrollEnd = () => { ... }	スクロールがリストの末尾（下端）に達したとき
onSelected	Event	onSelected = (index) => { ... }	アイテムをタップしたとき
remove	Method	remove(index)	指定したインデックスのアイテムを削除
select	Property	select（読み書き、整数）	選択されたアイテムのインデックス。ない場合は-1
setOnceAnimation	Method	setOnceAnimation()	入場（スタッガード）アニメーションを次のビルドで一度再生
setState	Method	setState(index, function)	該当アイテムをスコープとしてコールバックを実行し、そのアイテムのみ更新

Widget Control詳細

add

リストの末尾に空のアイテムを1つ追加し、リストを再描画します。

• 種類: Method
• Parameters: なし
• Returns: 整数（int） - 新しく追加されたアイテムのインデックス

Example

const i = draglistID.add();

clear

すべてのアイテムを削除し、リストを再描画します。

• 種類: Method
• Parameters: なし
• Returns: なし

Example

draglistID.clear();

count

繰り返しレンダリングするアイテム数を読み書きします。値を書き込むと、バインディングされたデータリストの長さをその値に合わせて増減し、リストを再描画します。

• 種類: Property（読み書き）
• 型: 整数（int）

Example

draglistID.count = 5;
const n = draglistID.count;

current

バインディングスコープとして使用する現在のアイテムインデックスを読み書きします。値を書き込むと、それ以降のプロパティ書き込みがそのアイテム（行）に適用されます。指定されたものがない場合は-1を返します。

• 種類: Property（読み書き）
• 型: 整数（int）、ない場合は-1

Example

draglistID.current = 0;
const cur = draglistID.current;

insert

指定した位置に空のアイテムを挿入し、リストを再描画します。

• 種類: Method
• Parameters: index（整数） - 挿入する位置
• Returns: なし

Example

draglistID.insert(0);

onMultiReorder

選択した複数のアイテムをまとめて移動したときに実行されます。

• 種類: Event
• ハンドラー引数: indices（整数配列） - 移動したアイテムの元のインデックス（ソート済み） / newIndex（整数） - ドロップ先のインデックス
• Returns: なし

Example

draglistID.onMultiReorder = (indices, newIndex) => {
  // 複数移動の処理
};

onReorder

アイテムを1つドラッグして新しい位置に移動したときに実行されます。

• 種類: Event
• ハンドラー引数: oldIndex（整数） - 移動前のインデックス / newIndex（整数） - 移動後のインデックス
• Returns: なし

Example

draglistID.onReorder = (oldIndex, newIndex) => {
  // 並べ替えの処理
};

onReorderEnd

ドラッグによる並べ替えのジェスチャーが終わったとき（移動が適用された後）に実行されます。

• 種類: Event
• ハンドラー引数: index（整数） - ドラッグしたアイテムの最終インデックス
• Returns: なし

Example

draglistID.onReorderEnd = (index) => {
  // ドラッグ終了時の処理
};

onReorderStart

ドラッグによる並べ替えのジェスチャーが始まるときに実行されます。ただし、複数選択の連携用であるselectWidgetIdが指定され、有効なウィジェットにマッピングされている場合のみ発火します。selectWidgetIdを指定しない場合、このイベントは呼び出されません（一方、onReorderEndは常に発火します）。

• 種類: Event
• ハンドラー引数: index（整数） - ドラッグ中のアイテムのインデックス
• Returns: なし

Example

draglistID.onReorderStart = (index) => {
  // ドラッグ開始時の処理
};

onScrollEnd

スクロールがリストの末尾（下端）に達したときに一度実行されます。下端から離れて再度スクロールすると、再び発火します。

• 種類: Event
• ハンドラー引数: なし
• Returns: なし

Example

draglistID.onScrollEnd = () => {
  // 次のページの読み込みなど
};

onSelected

ユーザーがアイテムをタップしたときに実行されます。

• 種類: Event
• ハンドラー引数: index（整数） - タップしたアイテムのインデックス
• Returns: なし

Example

draglistID.onSelected = (index) => {
  // アイテム選択時の処理
};

remove

指定したインデックスのアイテムを削除し、リストを再描画します。インデックスが範囲外の場合は何も行いません。

• 種類: Method
• Parameters: index（整数） - 削除するアイテムのインデックス
• Returns: なし

Example

draglistID.remove(0);

select

選択されたアイテムのインデックスを読み書きします。選択されたものがない場合は-1を返します。

• 種類: Property（読み書き）
• 型: 整数（int）、ない場合は-1

Example

draglistID.select = 2;
const sel = draglistID.select;

setOnceAnimation

入場（スタッガード）アニメーションを次のビルド時に一度再生し直します。効果が現れるにはアニメーションの設定が必要です。

• 種類: Method
• Parameters: なし
• Returns: なし

Example

draglistID.setOnceAnimation();

setState

指定したアイテムをバインディングスコープとしてコールバックを実行した後、そのアイテムのみを再描画します。特定のアイテムのバインディングプロパティを更新するときに使用します。

• 種類: Method
• Parameters: index（整数） - 更新するアイテムのインデックス / function（関数） - 該当アイテムがアクティブスコープである間に実行するコールバック
• Returns: なし

Example

draglistID.setState(0, () => {
  // インデックス0のアイテムのバインディングプロパティを更新
});

共通Widget Control（すべてのウィジェット）

注記

すべてのウィジェットは、setProperty / getProperty / setStylePropertyのような名前ベースの共通Widget Control（Method）も使用できます。詳しいルールは共通Widget Controlリファレンスドキュメント（作成予定）を参照してください。