Minimal drag and drop patch based on PR 292

[beekhof]

Add basic drag-and-drop functionality

[riyasat-ali]

@beekhof How can we use that functionality of drag and drop for #307? Is there any Stackblitz or code-sandbox for that? Please let me know.

@bumbeishvili

[A7medMo7ammed20]

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

[joelcoxokc]

I ran into issues here where a node would have collisions with multiple nodes.
Ideally we want a collision with one node.

So in my code I changed this condition to account for the width of the node.

Basically if the sourceNode is halfway over the targetNode I then assign it as the target node.

cP.x1 - event.width / 2 > cPInner.x0 &&
cP.x0 + event.width / 2 < cPInner.x1 &&
cP.y1 - event.height / 2 > cPInner.y0 &&
cP.y0 + event.height / 2 < cPInner.y1

Using the half way mark is my best approach because the sourceNode could never be halfway over multiple target nodes

[joelcoxokc]

You could also store halfWidth and halfHeight on cP so that you don't have to keep calculating inside the condition

[joelcoxokc]

const cP = {
    x0: d.x,
    y0: d.y,
    x1: d.x + event.width,
    y1: d.y + event.height,
    midX: d.x + event.width / 2,
    midY: d.y + event.height / 2
};



cP.midX > cPInner.x0 &&
cP.midX < cPInner.x1 &&
cP.midY > cPInner.y0 &&
cP.midY < cPInner.y1

[seanpmaxwell]

I second this, please implement this feature.

[bumbeishvili]

@seanpmaxwell

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]

@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]

@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]

@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]

@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]

@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]

@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]

@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?