search

bumbeishvili / org-chart

Highly customizable org chart. Integrations available for Angular, React, Vue
https://stackblitz.com/edit/web-platform-o5t1ha
MIT License
928 stars 330 forks source link

Minimal drag and drop patch based on PR 292 #307

Open beekhof opened 1 year ago

beekhof commented 1 year ago

Add basic drag-and-drop functionality

riyasat-ali commented 1 year ago

@beekhof How can we use that functionality of drag and drop for https://github.com/bumbeishvili/org-chart/pull/307? Is there any Stackblitz or code-sandbox for that? Please let me know.

@bumbeishvili

A7medMo7ammed20 commented 1 year ago

How can i use your updated version (Drag and Drop Functionality) ?

seanpmaxwell commented 1 year ago

I second this, please implement this feature.

bumbeishvili commented 1 year ago

@seanpmaxwell

image

To implement this feature, I have to discard paid projects and lose about 1500-2500$ , so if someone who needs it is willing to pay this amount, I am happy to implement it and include it in the build

joelcoxokc commented 10 months ago

@bumbeishvili @seanpmaxwell @riyasat-ali @A7medMo7ammed20 @beekhof

Here is my drag example.. I copied what I could from our production app. https://stackblitz.com/edit/js-bmyjfc?file=index.html

This has undo/redo/cancel built into it. Also each node can be draggable or droppable.

I made a button to start the drag process.. otherwise there are all kinds of issues when trying to pan while dragging is enabled. So you have to click organize to start the drag-drop.

@bumbeishvili Feel free to fork this and add it to the examples

seanpmaxwell commented 8 months ago

@bumbeishvili @seanpmaxwell @riyasat-ali @A7medMo7ammed20 @beekhof

Here is my drag example.. I copied what I could from our production app. https://stackblitz.com/edit/js-bmyjfc?file=index.html

This has undo/redo/cancel built into it. Also each node can be draggable or droppable.

I made a button to start the drag process.. otherwise there are all kinds of issues when trying to pan while dragging is enabled. So you have to click organize to start the drag-drop.

@bumbeishvili Feel free to fork this and add it to the examples

Thanks so much for this.

joelcoxokc commented 8 months ago

@bumbeishvili @seanpmaxwell @riyasat-ali @A7medMo7ammed20 @beekhof

Here is my drag example.. I copied what I could from our production app. https://stackblitz.com/edit/js-bmyjfc?file=index.html

This has undo/redo/cancel built into it. Also each node can be draggable or droppable.

I made a button to start the drag process.. otherwise there are all kinds of issues when trying to pan while dragging is enabled. So you have to click organize to start the drag-drop.

@bumbeishvili Feel free to fork this and add it to the examples

Thanks so much for this.

There is an open PR that has more defined code.

seanpmaxwell commented 8 months ago

@bumbeishvili @seanpmaxwell @riyasat-ali @A7medMo7ammed20 @beekhof

Here is my drag example.. I copied what I could from our production app. https://stackblitz.com/edit/js-bmyjfc?file=index.html

This has undo/redo/cancel built into it. Also each node can be draggable or droppable.

I made a button to start the drag process.. otherwise there are all kinds of issues when trying to pan while dragging is enabled. So you have to click organize to start the drag-drop.

@bumbeishvili Feel free to fork this and add it to the examples

Thanks so much for this.

There is an open PR that has more defined code.

More than the stackblitz example? I saw that but it does it also require the html buttons that the stackblitz example did?

joelcoxokc commented 8 months ago

@bumbeishvili @seanpmaxwell @riyasat-ali @A7medMo7ammed20 @beekhof

Here is my drag example.. I copied what I could from our production app. https://stackblitz.com/edit/js-bmyjfc?file=index.html

This has undo/redo/cancel built into it. Also each node can be draggable or droppable.

I made a button to start the drag process.. otherwise there are all kinds of issues when trying to pan while dragging is enabled. So you have to click organize to start the drag-drop.

@bumbeishvili Feel free to fork this and add it to the examples

Thanks so much for this.

There is an open PR that has more defined code.

More than the stackblitz example? I saw that but it does it also require the html buttons that the stackblitz example did?

The PR is for adding the code to the library. So it is probably not useful to you until @bumbeishvili merges it.

The example in the stack blitz is an implementation on top of the existing library that requires much more code on your side. I am currently using the stackblitx example in my own production codebase.

Though I am using angular, and not HTML buttons and selectors

seanpmaxwell commented 8 months ago

@bumbeishvili @seanpmaxwell @riyasat-ali @A7medMo7ammed20 @beekhof

Here is my drag example.. I copied what I could from our production app. https://stackblitz.com/edit/js-bmyjfc?file=index.html

This has undo/redo/cancel built into it. Also each node can be draggable or droppable.

I made a button to start the drag process.. otherwise there are all kinds of issues when trying to pan while dragging is enabled. So you have to click organize to start the drag-drop.

@bumbeishvili Feel free to fork this and add it to the examples

Thanks so much for this.

There is an open PR that has more defined code.

More than the stackblitz example? I saw that but it does it also require the html buttons that the stackblitz example did?

The PR is for adding the code to the library. So it is probably not useful to you until @bumbeishvili merges it.

The example in the stack blitz is an implementation on top of the existing library that requires much more code on your side. I am currently using the stackblitx example in my own production codebase.

Though I am using angular, and not HTML buttons and selectors

Hmm, so I can probably replicate what's in stackblitz in my own code if I can rewrite in in Html? Thanks. I'll message again if I have any other questions.

seanpmaxwell commented 7 months ago

@bumbeishvili @seanpmaxwell @riyasat-ali @A7medMo7ammed20 @beekhof

Here is my drag example.. I copied what I could from our production app. https://stackblitz.com/edit/js-bmyjfc?file=index.html

This has undo/redo/cancel built into it. Also each node can be draggable or droppable.

I made a button to start the drag process.. otherwise there are all kinds of issues when trying to pan while dragging is enabled. So you have to click organize to start the drag-drop.

@bumbeishvili Feel free to fork this and add it to the examples

Thanks so much for this.

There is an open PR that has more defined code.

More than the stackblitz example? I saw that but it does it also require the html buttons that the stackblitz example did?

The PR is for adding the code to the library. So it is probably not useful to you until @bumbeishvili merges it.

The example in the stack blitz is an implementation on top of the existing library that requires much more code on your side. I am currently using the stackblitx example in my own production codebase.

Though I am using angular, and not HTML buttons and selectors

Dude your sample code is amazing, I'm almost done with drag and drop. One thing though, it always inserts at the beginning on the siblings. Any idea how I can get it to insert at the end?