DragList (드래그리스트) Widget Control

This page lists the Widget Control members (Property · Method · Event) you use to control the DragList widget from a script. To learn about the widget itself and how to use it, visit DragList.

info

In the examples below, draglistID is the name (ID) you assigned to the DragList widget on the canvas. In a script, access members as widgetID.member.

Widget Control summary

Widget Control	Kind	Signature	Description
add	Method	add() → integer	Adds an empty item at the end and returns the new index
clear	Method	clear()	Removes every item
count	Property	count (read/write, integer)	Number of items rendered by repetition. Writing a value resizes the bound list to match, then redraws it
current	Property	current (read/write, integer)	Index of the current item to use as the binding scope. -1 if there is none
insert	Method	insert(index)	Inserts an empty item at the given position
onMultiReorder	Event	onMultiReorder = (indices, newIndex) => { ... }	When several selected items are moved together
onReorder	Event	onReorder = (oldIndex, newIndex) => { ... }	When a single item is dragged to a new position
onReorderEnd	Event	onReorderEnd = (index) => { ... }	When a drag reorder finishes
onReorderStart	Event	onReorderStart = (index) => { ... }	When a drag reorder starts (fires only when selectWidgetId is set)
onScrollEnd	Event	onScrollEnd = () => { ... }	When scrolling reaches the end (bottom) of the list
onSelected	Event	onSelected = (index) => { ... }	When an item is tapped
remove	Method	remove(index)	Removes the item at the given index
select	Property	select (read/write, integer)	Index of the selected item. -1 if there is none
setOnceAnimation	Method	setOnceAnimation()	Plays the entrance (staggered) animation once on the next build
setState	Method	setState(index, function)	Runs a callback with that item as the scope, then refreshes only that item

Widget Control details

add

Adds one empty item at the end of the list and redraws the list.

• Kind: Method
• Parameters: None
• Returns: integer (int) - the index of the newly added item

Example

const i = draglistID.add();

clear

Removes every item and redraws the list.

• Kind: Method
• Parameters: None
• Returns: None

Example

draglistID.clear();

count

Reads and writes the number of items rendered by repetition. Writing a value grows or shrinks the bound data list to match, then redraws the list.

• Kind: Property (read/write)
• Type: integer (int)

Example

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

current

Reads and writes the index of the current item to use as the binding scope. Once you write a value, later property writes apply to that item (row). Returns -1 when nothing is set.

• Kind: Property (read/write)
• Type: integer (int), -1 when there is none

Example

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

insert

Inserts an empty item at the given position and redraws the list.

• Kind: Method
• Parameters: index (integer) - the position to insert at
• Returns: None

Example

draglistID.insert(0);

onMultiReorder

Runs when several selected items are moved together.

• Kind: Event
• Handler arguments: indices (integer array) - the original indices of the moved items (sorted) / newIndex (integer) - the drop target index
• Returns: None

Example

draglistID.onMultiReorder = (indices, newIndex) => {
  // Handle the multi-item move
};

onReorder

Runs when a single item is dragged to a new position.

• Kind: Event
• Handler arguments: oldIndex (integer) - the index before the move / newIndex (integer) - the index after the move
• Returns: None

Example

draglistID.onReorder = (oldIndex, newIndex) => {
  // Handle the reorder
};

onReorderEnd

Runs when the drag-reorder gesture ends, after the move has been applied.

• Kind: Event
• Handler arguments: index (integer) - the final index of the dragged item
• Returns: None

Example

draglistID.onReorderEnd = (index) => {
  // Handle the end of the drag
};

onReorderStart

Runs when the drag-reorder gesture starts. It fires only when selectWidgetId — the property that wires up multi-selection — is set and maps to a valid widget. Leave selectWidgetId unset and this event is never called, while onReorderEnd always fires.

• Kind: Event
• Handler arguments: index (integer) - the index of the item being dragged
• Returns: None

Example

draglistID.onReorderStart = (index) => {
  // Handle the start of the drag
};

onScrollEnd

Runs once when scrolling reaches the end (bottom) of the list. Scroll away from the bottom and back, and it fires again.

• Kind: Event
• Handler arguments: None
• Returns: None

Example

draglistID.onScrollEnd = () => {
  // Load the next page, for example
};

onSelected

Runs when a user taps an item.

• Kind: Event
• Handler arguments: index (integer) - the index of the tapped item
• Returns: None

Example

draglistID.onSelected = (index) => {
  // Handle the item selection
};

remove

Removes the item at the given index and redraws the list. Does nothing if the index is out of range.

• Kind: Method
• Parameters: index (integer) - the index of the item to remove
• Returns: None

Example

draglistID.remove(0);

select

Reads and writes the index of the selected item. Returns -1 when nothing is selected.

• Kind: Property (read/write)
• Type: integer (int), -1 when there is none

Example

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

setOnceAnimation

Replays the entrance (staggered) animation once on the next build. An animation must be configured for the effect to appear.

• Kind: Method
• Parameters: None
• Returns: None

Example

draglistID.setOnceAnimation();

setState

Runs a callback with the given item as the binding scope, then redraws only that item. Use it to refresh the bound properties of one specific item.

• Kind: Method
• Parameters: index (integer) - the index of the item to refresh / function (function) - the callback to run while that item is the active scope
• Returns: None

Example

draglistID.setState(0, () => {
  // Refresh the bound properties of the item at index 0
});

Common Widget Control (all widgets)

note

Every widget can also use name-based common Widget Control (Method) members such as setProperty, getProperty, and setStyleProperty. For the detailed rules, see the common Widget Control reference doc (to be written).