DragList

DragListウィジェットは、アイテムをドラッグして並び順を変更できるスクロールリストです。
リストの項目をユーザー自身が並べ替える必要がある画面で使用します。

備考

このウィジェットはFreeプランではロックされており、Pro・Enterpriseプランで使用できます。

定義・役割

DragListウィジェットは、縦（デフォルト）または横にスクロールするリストを描画し、各アイテムをドラッグして並び順を変更できるようにします。ドラッグハンドルアイコンの表示、アイテム全体のドラッグ、複数選択での移動、スクロール終端の検知、表示時のアニメーションに対応しています。

• カテゴリー: Layouts
• デフォルトのスクロール方向: 縦（vertical）
• デフォルトのアイテム数（itemCount）: 0

機能

機能	説明
ドラッグでの並べ替え	アイテムをドラッグ＆ドロップして順序を変更します。移動が終わると、バインディングされたデータリストの順序も合わせて更新されます。
ドラッグハンドル	各アイテムにドラッグハンドルアイコンを表示し、カラー・サイズ・アライメント・余白を設定します。
アイテム全体のドラッグ	ハンドルを使わず、アイテム全体をつかんでドラッグするように設定します。
複数選択での移動	Checkboxウィジェットと連携して、複数のアイテムを一度に移動します。
スクロール制御	方向・逆方向・物理効果・余白などのスクロール動作を調整します。
表示時のアニメーション	リストが表示されるときにスタッガード（順次）アニメーションを再生します。

使い方

1. 左のウィジェットパレットでLayoutsカテゴリーを開きます。
2. DragList項目をキャンバスへドラッグ＆ドロップします。
3. データバインディングで、リストに表示する項目と件数（itemCount）を接続します。
4. 必要に応じて、ドラッグハンドルの表示（useDragHandler）・アイコン・カラーを調整します。
5. 並び順の変更を処理するには、スクリプトで並べ替えイベント（onReorderなど）を接続します。

プロパティ

注記

以下は、プロパティパネルを展開したときにすぐ表示される最上位のプロパティです。animationやscrollControllerのようなグループ化されたプロパティは、展開するとさらに下位のオプションがあり、このバージョンのドキュメントでは最上位の項目のみを扱います。表の順序はプロパティパネルに表示される順序と同じです。

プロパティ	説明	デフォルト値	値 / タイプ
useDragHandler	各アイテムにデフォルトのドラッグハンドルアイコンを表示するかどうか	true（オン）	true/false
selectWidgetId	複数選択に使用するCheckboxウィジェットのID	未指定	文字列（ウィジェットID）
selectPropertyName	選択状態を読み取るプロパティ名（未指定の場合はvalue）	未指定	文字列
handlerColor	ドラッグハンドルアイコンのカラー	未指定	カラー
dragHandleIcon	ドラッグハンドルに使用するアイコン	未指定（デフォルトのハンドルアイコン）	アイコン設定
iconSize	ハンドルアイコンのサイズ	24	数値（px）
iconAlignment	アイテム内でのハンドルの位置	右中央	アライメント値
dragHandlePadding	ハンドル周囲の余白	未指定	余白の値
fullItemDraggable	ハンドルを使わずアイテム全体をつかんでドラッグ	false	true/false
padding	リスト外側の余白	未指定	余白の値
itemPadding	各アイテム内側の余白	未指定	余白の値
scrollDirection	スクロール（配置）方向	縦 vertical	horizontal, vertical
reverse	スクロール方向の反転	false	true/false
scrollController	外部のスクロールコントローラー	未指定	スクロールコントローラー
primary	プライマリスクロールビューかどうか	未指定	true/false
physics	スクロールの物理効果	未指定	bouncing, clamping, alwaysScrollable, rangeMaintaining, neverScrollable, page
shrinkWrap	内容のサイズに合わせてリストを縮小	false	true/false
anchor	スクロールアンカーの位置	0.0	数値（0〜1）
cacheExtent	画面外を事前にレンダリングする領域	未指定	数値（px）
dragStartBehavior	ドラッグ開始の判定方式	start	down, start
keyboardDismissBehavior	スクロール時にキーボードを閉じる動作	未指定	manual, onDrag
restorationId	スクロール位置を復元するためのID	未指定	文字列
clipBehavior	クリップ（切り取り）方式	hardEdge	none, hardEdge, antiAlias, antiAliasWithSaveLayer
itemExtent	アイテムの固定サイズ	未指定	数値（px）
autoScrollerVelocityScalar	端での自動スクロール速度の倍率	800	数値
itemCount	リストに表示するアイテム数（データバインディング）	0	数値（整数）
animation	表示時（スタッガード）アニメーションの設定	未指定	アニメーション設定

注記

並び順の変更やスクロールに関するイベント（onReorder、onScrollEndなど）、件数・選択の制御はスクリプトのWidget Controlとして提供されており、下のさらに詳しくにあるドキュメントで確認します。

注意・ヒント

警告

複数選択での移動は、selectWidgetIdに選択状態を持つCheckboxウィジェットのIDを指定しないと動作しません。指定しない場合は一度に1つずつ移動します。

ヒント

dragHandleIconを指定しなくても、useDragHandlerがオンであればデフォルトのドラッグハンドルアイコンが表示されます。fullItemDraggableをオンにすると、ハンドルの代わりにアイテム全体をつかんでドラッグします。

さらに詳しく

ヒント

このウィジェットをスクリプトで制御するWidget Control（Property・Method・Event）の全体は、DragList Widget Controlのドキュメントで確認してください。