node dragging between swimlane

[Ashish]

How can we detect that a node has be dragged from one lane to another in swimlane diagram ?

Please see attachement:

https://drive.google.com/file/d/1SGdkIP0VtfP3IMVPBZXI7oBkYFvWQc8t/view?usp=sharing

[Aravind Ravi]

Hi Ashish,

When we drag and drop a node from one lane to another lane drop event gets triggered. In that event through element argument you can find the dropped node and through target argument you can find in which lane node gets dropped. Please find the below code snippet

<ejs-diagram

        id="diagram"

        ref="diagram"

        :width="width"

        :height="height"

        :connectors="connectors"

        :nodes="nodes"

        :drop="drop"

      ></ejs-diagram>

 

data () {

        return {

            width: "1000px",

            height: "700px",

            connectors: connectors,

            nodes: nodes,

           drop: (args) => {

          debugger

          console.log(args.element);

         console.log(args.target);

      }

        }

    },

Regards

Aravind Ravi

[Ashish]

Hi  Aravind, 

I encountered another issue with drag. When we start dragging, Label below node showing {X:123:Y:134} , which  is causing drag event cancelation. See attached video for more clarity. 

How can we disable that label or fix it ?

Thanks !

Attachment: 13.05.2022_09.56.47_REC_eada9950.zip

[Aravind Ravi]

Hi Ashish,

On analyzing the provided video, we found that issue occurs due to you do not refer diagram style in your application. Please add the Diagram component’s styles as given below in the <style> section of the App.vue file. So that when you drag the node, the node gets dragged properly. Please refer to code snippet for how to add diagram style

<style>

@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";

</style>

Please refer to below documentation for how to add a diagram CSS reference

UG Link: https://ej2.syncfusion.com/vue/documentation/diagram/getting-started/#adding-css-reference

Regards

Aravind Ravi