jerosoler / Drawflow

Simple flow library 🖥️🖱️
https://jerosoler.github.io/Drawflow/
MIT License
4.78k stars 741 forks source link

¿How to work logic to drag div to drawflow? #277

Closed alejandroVaron closed 3 years ago

alejandroVaron commented 3 years ago

i'm new to vue,

I was trying to make the div be dragged to the drawflow as in the example, but I can't do it

image

I was trying to do it by seeing if the mouse enters or leaves the div, but I think it is not the correct way.

Thanks.

alejandroVaron commented 3 years ago

These are the methods:

image

jerosoler commented 3 years ago

Hi! @alejandroVaron

I think he has the events reversed

View demo code:

<div class="drag-drawflow" draggable="true" ondragstart="drag(event)" data-node="dbclick">
        <i class="fas fa-mouse"></i><span> DBClick!</span>
</div>

And th drawflow div:

 <div id="drawflow" ondrop="drop(event)" ondragover="allowDrop(event)"> .... </div>

In your code you don't have the event drop in drawflow.

Check out the demo.

jerosoler commented 3 years ago

I found a examples create for comunity: https://github.com/stirante/controller-builder/blob/3b365ff2328cf419c52d6c4d6321c4635bbaa764/src/pages/Drawflow.vue

https://github.com/po-ci/draw-flow/blob/b9a610fd6130ee957cb65fbb6ce96b9335122cfe/apps/frontend/src/modules/flow/pages/TreeEditorPage/TreeEditorPage.vue

And

https://github.com/d3vzer0/reternal-ui/blob/6fd97c6d68925f96baec60e304e3d66081174dd4/src/pages/FlowChart.vue

alejandroVaron commented 3 years ago

Thanks.