CODEWITHSUNDEEP
reactjstreeantdreact-dnddroptarget
CnV
CnV

Reputation: 391

react-dnd DropTarget not fire when Tree draggable is enabled

I'm working on an application where I need to drag my item from right panel to the left panel. Right panel contains list of items, using Table Component. Left panel contains list of folders, can drag between folders, using Tree component. Currrently, I'm trying to implement with react-dnd plugin for the drag & drop function. For the Tree & Table components, I'm using antd plugin.

I have a problem. In Tree component there is a properties called 'draggable', which is to enable the drag & drop item within the Tree component. If I implemented the DropTarget to each of the TreeNode/Tree component, I'm not able to use its own draggable features, and vice versa.

I'm thinking to not implement the DropTarget, only implement the DragTarget, and do something inside the EndDrag handler. I tested in the test environment, it works. However, when I implemented in my real project, the response given is a bit delayed. I can't immediately perform/drag the 2nd item to the folder. I'm not sure if it is because the DropTarget is not implemented.

My intention is when I drag my item, I will store the info in a state, and when I hover to my folder, I will store the info in a state. and when the item is dropped/end drag, I will perform something based on the 2 states. I wish to keep the draggable features in Tree component, so I don't have the implement other handlers for these actions.

Can anyone help me with this? is there any better solution?

This is my test environment, implemented DropTarget with Tree's draggable is enabled: https://stackblitz.com/edit/react-w1bbuc-kxmudq

Upvotes: 0

Views: 365

Answers (1)

erw13n
erw13n

Reputation: 529

I also been struggle to make it happen, but I came up with a solution using plain javascript:

<Tree
  treeData={folders}
  titleRender={(nodeData) => {
    return (
      <span 
         onDrop={(info) => drop_handler(info, nodeData) } 
      >
        {nodeData.title}
      </span>
    );
   }}
/>

<Table
   columns={columns}
   dataSource={data}
   onRow={(record, rowIndex) => {
     return {
       onDragStart: event => { dragstart_handler(event, record) }
     }
/>

function dragstart_handler(ev, record) {
  ev.dataTransfer.setData("text/plain", JSON.stringify(record));
}

function drop_handler(ev, nodeData) {
    ev.preventDefault();
  
    const data = ev.dataTransfer.getData("text/plain");
    console.log(data, nodeData);
}

Upvotes: 0

Related Questions