drag block to reorder document

[codingbyai]

do you plan to implement the feature of dragging block to reorder document on mobile like Notion? Or have any technical advice to implement it ?

[Digital365Staking]

Currently, AppFlowy doesn’t have the drag-and-drop feature on mobile like Notion for reordering blocks, but this would be a highly valuable feature to improve the mobile experience. It would allow users to reorganize their content more fluidly.

Potential Implementation Advice

Here’s some high-level advice for implementing a drag-and-drop feature for mobile in an application like AppFlowy:

1. Use Cross-Platform Drag-and-Drop Libraries

For a cross-platform solution (since AppFlowy is built with Flutter), you can leverage libraries or packages that provide drag-and-drop functionality:

• Flutter’s built-in support: Flutter provides support for drag-and-drop via the Draggable, DragTarget, and LongPressDraggable widgets. This can be adapted to build a custom reordering system for blocks.
• Third-party packages: Consider using popular drag-and-drop packages in Flutter like flutter_reorderable_list or reorderables. These packages allow smooth drag-and-drop behavior, similar to what you'd expect in an app like Notion.

2. Optimize for Mobile Gestures

• Touch Sensitivity: Ensure that blocks can be dragged easily with touch input, which is different from the precision of a mouse. You’ll want to allow for a long press or double-tap to initiate the drag, followed by a smooth dragging experience.
• Smooth Animations: Adding visual feedback, such as snapping blocks into position or highlighting the drop target area, would enhance the UX. Flutter’s animation capabilities can be leveraged to create a polished feel.

3. Block Identification and Reordering Logic

Each document block would need to have a unique ID or an index that can be dynamically adjusted as it's dragged and dropped into a new position. This would involve:

• Tracking the current position of each block
• Recalculating positions when a block is dragged across another
• Persisting the new order in real time (perhaps with a debounce or delay to avoid overloading the app)

4. Consider Performance Implications

Reordering large documents with many blocks can introduce performance challenges on mobile, so optimizing the app to handle drag events without causing latency is key. Using ReorderableListView or optimizing the rendering of the blocks during the drag operation could help maintain smoothness.

5. Compatibility with Desktop and Web

AppFlowy aims to be a cross-platform tool, so whatever solution is implemented should ideally work across both mobile and desktop. Flutter’s flexibility with adaptive UI could make this possible without too much rework, but testing across platforms will be important.

Feature Roadmap

If AppFlowy hasn’t yet mentioned this in their roadmap, it could be a good idea to suggest it as a feature request on their GitHub page. Cross-platform consistency, especially for drag-and-drop on mobile, is a feature many users would appreciate, and your input could encourage them to prioritize it.