feat(SortableList): enhance SortableList to support Table (IsTree) and/or TreeView compoment

[cairabbit]

Is there an existing issue for this?

• I have searched the existing issues

Is your feature request related to a problem? Please describe the problem.

Usually, when rendering a tree nodes (either as table (IsTree) or a TreeView), there might have 2 drag/drop scenarios:

1. Nodes can be draged to any node, which means the Node A1 (a child node of Node A), can drag and drop to Node B and become a child node of Node B, in that case, it needs to
   a. change the Node A1's Parent Node to Node B
   b. reorder existing Node B's child nodes
2. Changing parent node is not allowed, but the order of the child nodes can be reordered by drag/drop. In this case, when Node A1 was dragged and dropped to a new position, it needs to:
   a. reorder existing Node A's child nodes.

Currently, it's difficult to implement the above functions with Table (IsTree)/TreeView and SortableList. The SortableList doesn't support it. The group option of SortableList is to allow an item drag/drop in different parent container when they have same group name. The filter option is to disallow a node to be dragged. But in this scenario, we'll need to force the child node of Node A can only drag/drop under Node A (scenario 2). Meaning, it needs to disallow a node to be dropped in elsewhere but a specific area.

Describe the solution you'd like

A possible solution might be:

  private SortableOption sortableOption = new()
    {
      RootSelector = "tbody",
      Handle = "i.sort-handle",
      SortableAmongSameItemsOnly = true,  // this is to enable the sortable work on the 2nd scenario
      SameItemsClassPrefix = "parentNode_"  // this is to check if the items has same class with prefix "parentNode_", if so, it allows to drop.
    };
<SortableList @ref="sortableList" Option="sortableOption">
   <Table IsTree="true"  ...>
      ...
    </Table>
</Sortable>

or an option:

  private SortableOption sortableOption = new()
    {
      RootSelector = "tbody",
      Handle = "i.sort-handle",
      Filter = "", // this is existing option where you can define items to be undraggable.
      FilterToDrop = "" // this should accept either string or a function to check against the dragging item and the item that is under the dragging item. 
    };

There is other solution with some changes on Table, but that seems more complicated. Not sure if you can think a better solution.

Additional context

No response

[bb-auto]

@cairabbit Thank you for contacting us. We will give feedback later.

[ArgoZhang]

@cairabbit Your analysis is very correct. It is still difficult for SortableList to implement this function. I'm trying to solve this problem

[cairabbit]

Great thanks. Once that's implemented, an example would be appreciated.