[GH-ISSUE #3594] [Question] how to reorder (drag and drop) listitem ? #1632

New issue

Closed

opened 2026-03-23 20:52:02 +00:00 by mirror · 3 comments

mirror commented

2026-03-23 20:52:02 +00:00

Owner

Originally created by @kurt-steiner on GitHub (Oct 3, 2023).
Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3594

hey, I am developing a todolist application, and I need to write a feature so that I can drag and drop list item, like

https://github.com/AppFlowy-IO/AppFlowy/assets/46296608/e7ed43ef-75fd-4c07-94b5-21460325d006

and I found that this project has this feature, can you tell me how to write it given such data

class Task {
  int id;
  String name;
}

class TaskGroup {
  int id;
  String name;
  List<Task> tasks;
}

Originally created by @kurt-steiner on GitHub (Oct 3, 2023). Original GitHub issue: https://github.com/AppFlowy-IO/AppFlowy/issues/3594 hey, I am developing a todolist application, and I need to write a feature so that I can drag and drop list item, like https://github.com/AppFlowy-IO/AppFlowy/assets/46296608/e7ed43ef-75fd-4c07-94b5-21460325d006 and I found that this project has this feature, can you tell me how to write it given such data ```dart class Task { int id; String name; } class TaskGroup { int id; String name; List<Task> tasks; } ``` ![image](https://github.com/AppFlowy-IO/AppFlowy/assets/46296608/d4948456-ecb1-4e00-abe1-bb1ed63ca95f)

mirror closed this issue

2026-03-23 20:52:02 +00:00

mirror commented

2026-03-23 20:52:03 +00:00

Author

Owner

@emmggi commented on GitHub (Oct 3, 2023):

Package called boardview does exactly this.

The second question is about implementation? Check out the examples on the link page.

@emmggi commented on GitHub (Oct 3, 2023): Package called [boardview](https://pub.dev/packages/boardview) does exactly this. The second question is about implementation? Check out the examples on the link page.

mirror commented

2026-03-23 20:52:03 +00:00

Author

Owner

@kurt-steiner commented on GitHub (Oct 3, 2023):

what? I have just only one question, is how to move the item to another group, as the video shows 😋

@kurt-steiner commented on GitHub (Oct 3, 2023): what? I have just only one question, is how to move the item to another group, as the video shows :yum:

mirror commented

2026-03-23 20:52:03 +00:00

Author

Owner

@Xazin commented on GitHub (Oct 3, 2023):

You use Draggable and DragTarget.

As long as the DragTarget can accept the type of draggable from any column, you're good to go.

The widget with the DragTargets is the Column, that column should have the groupId or index of the column, to be able to get the groupTo when dragging between groups.

The Data of a Draggable, should include groupFrom and index. This will enable you make this check in the Column:

if (groupFrom == widget.groupIndex) {
  // We're just reordering within column
} else {
  // We're moving from one group to another
}

I don't know what kind of state management you prefer or use, but it should be quite simple from there.

Along with each DragTarget you should keep track of the index of that DragTarget, allowing you to move items to the correct location.

You can also, as mentioned already, use a package like boardview.

Since this is unrelated to AppFlowy itself, I'll close it with this comment.

@Xazin commented on GitHub (Oct 3, 2023): You use Draggable and DragTarget. As long as the DragTarget can accept the type of draggable from any column, you're good to go. The widget with the DragTargets is the Column, that column should have the groupId or index of the column, to be able to get the `groupTo` when dragging between groups. The Data of a Draggable, should include `groupFrom` and `index`. This will enable you make this check in the Column: ``` if (groupFrom == widget.groupIndex) { // We're just reordering within column } else { // We're moving from one group to another } ``` I don't know what kind of state management you prefer or use, but it should be quite simple from there. Along with each DragTarget you should keep track of the index of that DragTarget, allowing you to move items to the correct location. --- You can also, as mentioned already, use a package like [boardview](https://www.youtube.com/watch?v=FrwEFv31onk). Since this is unrelated to AppFlowy itself, I'll close it with this comment.

mirror referenced this issue

2026-03-23 22:16:09 +00:00

[PR #1632] [MERGED] UnitTest_switching_from_text_to_checkbox #4864