We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Drag and drop operation is interrupted in Vue2

When selecting icons from the palette, there were no issues with dragging. However, when trying to move or connect pre-existing nodes or connectors by dragging, the drag operation sometimes fails to maintain its hold and drops prematurely.


Please refer to the attached file for more details.


The code was referenced from the following link: https://ej2.syncfusion.com/vue/demos/#/bootstrap5/diagram/default-functionality.html


Attachment: Captures_35d9af98.zip

3 Replies

SJ Sivaranjith Jeyabalan Syncfusion Team March 21, 2023 02:38 PM UTC

Hi,

Could you please confirm whether you are dragging the image node from palette to diagram? Also, could you please share your code example of diagram properties defined in the application.


Regards,

Sivaranjith



AS aim Systems replied to Sivaranjith Jeyabalan March 22, 2023 04:11 AM UTC

Hi,

I understand that you have confirmed the use of an image node in the palette, but there are no issues when dragging it from the palette to the main screen. 

The current issue is suspected to be unrelated to the node type, as the same problem occurs regardless of whether the node type is an image or a flow. The same problem also occurs with the connectors.

Please refer to the attached test code.


Attachment: src_120278d.zip


VG Vivisa Ganesan Syncfusion Team March 22, 2023 04:01 PM UTC

Hi,

The cursor hovers on the tooltip while dragging the node, causing the mouseup event to be triggered. To avoid this refer material theme file in index.html file mentioned below. This will resolve your issue. Please find the sample below.


Link

<link rel='nofollow' href=https://cdn.syncfusion.com/ej2/material.css rel="stylesheet"/>


Sample:


Attachment: Drag_and_drop_edb9f4.zip

Loader.
Up arrow icon