Item is not reordered when I dragged tree item to new position

[elhakimz]

Describe the bug
Item is not reordered when I dragged tree item to new position

To Reproduce
Steps to reproduce the behavior (ideally a codesandbox link or similar if for a library issue):

Expected behavior
the tree item is positioned on new index after dragged and dropped

Screenshots
try to drag the item to the top

position dont change

`import { useMemo, useState } from "react";
import {
Tree,ControlledTreeEnvironment} from "react-complex-tree";
import "react-complex-tree/lib/style.css";
import { Card } from "@blueprintjs/core";
import { renderers as bpRenderers } from 'react-complex-tree-blueprintjs-renderers';

export default function FormTreeStructure({ components, selectedComponentId, onSelectComponent, onReorderComponent }) {
// Add state for tree interaction
const [focusedItem, setFocusedItem] = useState(null);
const [expandedItems, setExpandedItems] = useState([]);
const [selectedItems, setSelectedItems] = useState([]);

const treeComponents = useMemo(() => {
const treeData = { "root": { "index": 'root', data: 'Root', "children": [] } };

function isContainer(component){
  return component.type==='card' || component.type==='panel' || component.type==='section' || component.type==='Tabs'
}

components.forEach(component => {
  treeData[component.id] = {
    index: component.id,
    isFolder: isContainer(component),
    data: component.props.text || component.type,
    children: component.children?.map(child => child.id) || []
  };
  
  if (!component.parentId) {
    treeData.root.children.push(component.id);
  } else if (treeData[component.parentId]) {
    if (!treeData[component.parentId].children) {
      treeData[component.parentId].children = [];
    }
    treeData[component.parentId].children.push(component.id);
  }
});

return treeData;

}, [components]);
console.log("Tree Components:", (treeComponents));

const handleSelectItems = (items) => {
if (items.length > 0 && onSelectComponent) {
onSelectComponent(items[0]);
}
};

return (

<Card className="tree-container" style={{ height: '100%', overflow: 'auto' }}>
   
  <ControlledTreeEnvironment 
  items={treeComponents}
  getItemTitle={item => item.data} 
      {...bpRenderers}
      canDragAndDrop={true}
      canReorderItems={true}
      canDropOnFolder={true}
      viewState={{
        ['tree-2']: {
          focusedItem,
          expandedItems,
          selectedItems,
        },
      }}
      onFocusItem={item => setFocusedItem(item.index)}
      onExpandItem={item => setExpandedItems([...expandedItems, item.index])}
      onCollapseItem={item =>
        setExpandedItems(expandedItems.filter(expandedItemIndex => expandedItemIndex !== item.index))
      }
      onSelectItems={items => {
        setSelectedItems(items);
        handleSelectItems(items);
      }}
  >
    <Tree 
      treeId="tree-2" 
      rootItem="root" 
      treeLabel="UI Structure" 
    />
  </ControlledTreeEnvironment>
</Card>

);
}`

Additional context

• device: laptop
• testing on Chrome and Edge

[elhakimz]

adding onDrop

onDrop={({ targetItem, sourceItem, dropPosition }) => { console.log("onDrop called with: ", { targetItem, sourceItem, dropPosition }); if (onReorderComponent && sourceItem && targetItem) { console.log("yes=", { targetItem, sourceItem, dropPosition }); onReorderComponent(sourceItem.index, targetItem.index, dropPosition); }else{ console.log("no=", JSON.stringify({ targetItem, sourceItem, dropPosition })); } }}

[elhakimz]

reordering item is solved

onDrop={(items, target) => { console.log('onDrop items=', items); console.log('onDrop target=', target); if (target.targetType==='between-items' && onReorderComponent) { console.log('reordering') // Assuming you want to reorder the component based on the linearIndex onReorderComponent(items[0]['index'], target.linearIndex); }else if(target.targetType==='item' && onDropComponent){ console.log('dropping') let item={'id':items[0]['index'], 'type':'component'} onDropComponent(item, target.targetItem); } }}