How would I implement a rearrangeable list?

Help and Feedback Scripting Support
,
#1

I want to create a rearrangeable list with items like the videos below, however I’m not sure how to store the state and display animations. I need to implement these using Fusion, and providing an answer that works with it would be helpful but I can translate it otherwise.

I’ve tried making a state system where each item has a entry in a table however it’s clunky and the question of how to rearrange it remains. I’ve also tried translating React code to Fusion for the rearrangeable list but it was too clunky and used too many dependencies.


1 Like
#2

What I would recommend doing is breaking down the project as much as possible. Essentially, it’s just a system that would act similar to UIListLayout, is able to be moved, and has animations. A custom list system is what you are trying to make.

I would start with a table with the number of list spots that you want.

local items = -- Path to a folder of items

local list = {}

for i, v in pairs(items:GetChildren()) do
    list[#list + 1] = v
end

If you printed list it would something like this:

list = {
    [1] = Object1,
    [2] = Object2,
    [3] = Object3
}

Now you have a state system (i) and each places value (v). To move them, you can just create a function to re-arrange the list.

local function ArrangeList(index1: number, index2: number)
    local value1 = list[index1]
    local value2 = list[index2]

    list[index1] = value2
    list[index2] = value1
end

The above function takes index1 (starting position in the list) and swaps it with index2 (end position of the object).

EDIT: For moving the objects around, you would need to use RunService and move the object with the mouse along the X or Y axis (depending on what way the list goes). The positioning of the objects depends heavily on how it is handled (scale or offset) and where you want to the objects to align to (top, middle, bottom, left, center, right).

1 Like