Unable to drag from external source and drop it on the tree

[sjrules]

I was trying to drag from external source say div with similar data and drop it on to the tree , but it does not seem to work

[minop1205]

@sjrules What kind of "external source" are you referring to? If you don't mind, could you show me some code or samples?

[sjrules]

@minop1205 I have a draggable divs as below

const tasks = [ { name: "Product A", category: "sample", bgcolor: "yellow" }, { name: "P B", category: "sample", bgcolor: "blue" }, { name: "P C", category: "complete", bgcolor: "skyblue" } ]

useEffect(() => { var tasksData: any = { sample: [], complete: [] }

tasks.forEach((t: any) => {
  tasksData[t.category].push(
    <div key={t.name}
      onDragStart={(e) => onDragStart1(e, t.name)}
      draggable
      style={{ backgroundColor: t.bgcolor }}
    >
      {t.name}
    </div>
  );
});
settaskData(tasksData);

}, [])

 <div style={{ border: 'solid 1px black', margin: '20px', zIndex: 9999 }}
        onDragOver={(e) => onDragOver1(e)}
        onDrop={(e) => { onDrop1(e, "sample") }}>
        <span className="task-header">Sample</span>
        {taskData.sample}
      </div>

I have requirement to drag over data from div , which can be added to tree on drop . Even for two different react-dnd-treeview , I was able to drag drop between them only if the data has same id's .

Is there any solution to add data from external source say div or different react-dnd-treeview on drag and drop .

Thanks

[minop1205]

@sjrules Sorry, at the moment, i did not envision drop operations from external sources, so this package do not have such a feature.

However, there may be a use case where can add a new node from an external source using Drag&Drop, so i will consider adding this feature.

[55Cancri]

@minop1205 please add ability to drop from external source. I've been going down this list of dnd tree libraries (https://www.reddit.com/r/reactjs/comments/ch7o2n/best_react_tree_nested_sortable_drag_drop/) and none of them so far seem to support drag and drop from external source.

In my case, I have images I want to drop over a folder, and then have the image name show up as a leaf under the folder it was dropped under.

[JustynaKK]

@minop1205, is there a plan in some future to add this functionality?

[minop1205]

@JustynaKK Yes, I am currently developing it and will add the feature to the next version, which should be released sometime in July or mid-August.

[minop1205]

I have released v3.0.0 today.

In this version, you can now drop elements outside the tree and drag & drop between trees.

See the README and samples for details.

README

https://github.com/minop1205/react-dnd-treeview#external-drag-source

Demo and Examples (Storybook)

https://minop1205.github.io/react-dnd-treeview/

(See stories below)

• External element (inside react-dnd)
• External element (outside react-dnd)
• File drop
• Text drop
• Multiple tree

[55Cancri]

@minop1205 dude you are so freaking cool, holy crap. You have no idea how awesome and useful this will be. Thank you so so very much