1. Home
  2. Forum
  3. Angular - EJ 2
  4. Kanban card does not match mouse position while dragging

Kanban card does not match mouse position while dragging

Hi Syncfusion,

I have a kanban component and a diagram component interacting and have the following issues:

1) while the card is been dragged between columns and swimlanes, the position of the card is incorrect. Is there any way I can set it to match the mouse position? I have been trying to figure out for a while how to get the element and update its position using JS, but haven't made any progress.

2) when I drag from the symbol palette into the kanban I get strange behaviour. It is hard to describe, please watch the video linked to below.

Many thanks,

Geoff


18 Replies
IS Indrajith Srinivasan Syncfusion Team October 7, 2021 01:06 PM UTC

Hi Geoff, 
 
Greetings from Syncfusion support, 
 
We are currently validating your reported queries and will update you with further details in two business days by 11th October 2021. 
 
Regards, 
Indrajith 


GE Geoff replied to Indrajith Srinivasan October 12, 2021 01:20 AM UTC

Thanks @Indrajith.  Look forward to hearing your thoughts on this.



VJ Vinitha Jeyakumar Syncfusion Team October 12, 2021 03:31 PM UTC

Hi Geoff, 
 
 
Sorry for the inconvenience caused, 
 
Still, we are validating your reported query due to its complexity. We will update you the further details in two business days on or before 14th October 2021. 
 
Regards, 
Vinitha 


VJ Vinitha Jeyakumar Syncfusion Team October 18, 2021 12:49 PM UTC

Hi Geoff,  
  
  
Sorry for the inconvenience caused,  
  
Still, we are working with your sample to resolve the reported issue. We will update you the further details in three business days on or before 21st October 2021.  
  
Regards,  
Vinitha  



GE Geoff replied to Vinitha Jeyakumar October 18, 2021 10:25 PM UTC

Thanks for the update Vinitha, 

Please let me know if there is anything I can do or provide to help you resolve this.

Cheers, Geoff


VJ Vinitha Jeyakumar Syncfusion Team October 19, 2021 12:20 PM UTC

Hi Geoff,  
 
 
Thanks for your patience. We will update you once we validated the issue with the sample.  
 
Regards, 
Vinitha 


VJ Vinitha Jeyakumar Syncfusion Team October 22, 2021 01:29 PM UTC

Hi Geoff, 
 
 
We have validated your query “when I drag from the symbol palette into the kanban I get strange behaviour” 
 
In your  sample, we can see that you have manually overridden the height for the Kanban cells(e-card-wrapper) against Kanban’s default height. That’s why diagram drop event not triggered when drag the items form SymbolPalette and drop to Kanban board. After removing, manual height at sample end, diagram drop event triggered properly. We have written manual code for append symbolpallete information to Kanban board.  
 
Please check the below sample for reference, 
 
 
 
Another query “while the card is been dragged between columns and swimlanes, the position of the card is incorrect.” 
 
Can you please tell us the reason or need to customized the Kanban UI(Cells height and Empty Card text not shown on cells) at your end? 
 
Please check the sample and tell us the details to proceed further. 
 
Regards, 
Vinitha 


GE Geoff October 22, 2021 09:50 PM UTC

Hi Vinitha, 

Thanks very much for investigating these issues.  Here is a 2min video with some detail in response


while the card is been dragged between columns and swimlanes, the position of the card is incorrect

Your stackblitz doesn't seem to have solved this (even if I remove all css from kanban).  Is it possible to get a handle on the element that is being dragged so that I can just manually position it or even hide it?   Is there an ID or class that I can use to do something like elem.querySelector(".foo .bar");

when I drag from the symbol palette into the kanban I get strange behaviour

When I remove the alert from your stackblitz (diagram-with-custom-kanban-component.ts line 56).  The problem resurfaces.  Please see the video.

Regards,  
Geoff


GK Gunasekar Kuppusamy Syncfusion Team October 25, 2021 12:46 PM UTC

Hi Geoff,

We have checked the reported query with a shared video reference. Currently, we are validating the query with high priority. We will update the details within two business days(27th October).

Regards,
Gunasekar


VJ Vinitha Jeyakumar Syncfusion Team October 28, 2021 01:57 PM UTC

Hi Geoff, 
 
 
We have forwarded your reported query to the corresponding team with the sample you have shared and they are working with a high priority on it. We will update you the further details about this issue on or before 2nd November 2021. 
 
Regards, 
Vinitha 


VJ Vinitha Jeyakumar Syncfusion Team November 3, 2021 01:00 PM UTC

Hi Geoff,  
 
 
Sorry for the inconvenience caused. 
 
Since we are facing complexity while validating the issue. We couldn’t update you on the further details. We will update the validated issue details on or before 9th November 2021. 
 
We appreciate your patience until then. 
 
Regards, 
Vinitha 


VJ Vinitha Jeyakumar Syncfusion Team November 9, 2021 01:20 PM UTC

Hi Geoff, 
 
 
We have further validated your queries, 
 
Query 1. “when I drag from the symbol palette into the kanban I get strange behaviour” 
 
On further analysis of shared sample while dragging and dropping the symbols from palette to Kanban, the drop event from diagram is not trigged because the call from the base to the diagram is not triggered to hook the drop event in the diagram. Now, we have created a sample and fixed the multi-selector issue by setting the pointer event to null after dropping the node over the Kanban. For more information please refer to the attached sample. 
 
 
In the above sample, the drop event of diagram will trigger when drag and drop symbols from palate to kanban and using that you can customize the symbol as per your requirement. 
 
Query 2. “while the card is been dragged between columns and swimlanes, the position of the card is incorrect” 
 
Currently, we are validating the issue. Since it is complex to validate on the issue cause. We will update you the further details on this issue on or before 12th November 2021. 
 
Regards, 
Vinitha 
 


GE Geoff November 9, 2021 11:23 PM UTC

Hi Vinithi, 

Query 1. “when I drag from the symbol palette into the kanban I get strange behaviour” 

Thanks very much for getting to the bottom of this one.  I had spent ages and got nowhere - and I would never have figured it out.  For anyone coming after, the fix is to turn pointer events off and then back on again..



 public dragEnter(args: IDragEnterEventArgs): void {
    if (args) {
      let evt = document.getElementById('kanban');
      evt.style.pointerEvents = 'none';
    }
  }


  public drop(args: IDropEventArgs) {
    if (args) {
      let evt = document.getElementById('kanban');
      evt.style.pointerEvents = 'auto';
    }
  }


Query 2. “while the card is been dragged between columns and swimlanes, the position of the card is incorrect” 

Thanks for the update.  From what I have seen experimenting with other components.   This is a problem for kanban and grid, but not for the treeview.

On the grid I can get at the element and manually position it on the drag event, 

using document.querySelector(".e-dragclone") and the mouse event pos.  But it is pretty clunky and I can't get at the mouse event on the kanban.

Cheer,  Geoff



VJ Vinitha Jeyakumar Syncfusion Team November 10, 2021 01:31 PM UTC

Hi Geoff, 
 
 
Thanks for the update.  
 
As we told earlier we are validating the issue “while the card is been dragged between columns and swimlanes, the position of the card is incorrect” with high priority. We will update you the further details on or before 12th November 2021. 
 
Regards, 
Vinitha 


GE Geoff November 18, 2021 05:37 AM UTC

Hi Vinitha, any news?


VJ Vinitha Jeyakumar Syncfusion Team November 19, 2021 02:38 PM UTC

Hi Geoff, 
 
 
We have further validated your query “while the card is been dragged between columns and swimlanes, the position of the card is incorrect” 
 
The reported issue occurs due to the transition CSS property applied to the Diagram HTML element since you rendered Kanban inside the Diagram control. We have implemented the draggable element based on the Position absolute logic. In your use case, we are unable to get the position properly while applying the transition. 
 
 
We have also prepared a sample that explains the issue, 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Vinitha 


GE Geoff December 6, 2021 12:18 AM UTC



So I guess that means we effectively can't achieve what we are after in order to have a kanban and grid as html components on the diagram and drag and drop.  

Thanks a lot for investigating this anyhow.  Hope it becomes possible one day...


VJ Vinitha Jeyakumar Syncfusion Team December 7, 2021 09:53 AM UTC

Hi Geoff, 
 
 
Thanks for understanding the issue. please get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


Loader.
Up arrow icon