search

mattlewis92 / angular-calendar

A flexible calendar component for angular 15.0+ that can display events on a month, week or day view.
https://mattlewis92.github.io/angular-calendar/
MIT License
2.72k stars 863 forks source link

Drag position issue with ionic #1404

Open sjdrew opened 3 years ago

sjdrew commented 3 years ago

Describe the bug

Using angular-calendar with Ionic 5 works great. However have found one issue..

With snapDraggedEvents = false, when dragging the item appears offset to the right of the mouse by a large amount.

This issue only occurs if the ionic Left column menu is displayed.

Minimal reproduction of the problem with instructions

To reproduce. install ionic 5 starter project and choose the "sidemenu" template.

I then added angular-calendar and pasted in the draggable example from your demo site as a page and set snapDraggedEvents = false.

Screenshots

issue

Versions

Version: 28.22

matts-bot[bot] commented 3 years ago

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider sponsoring me

billyjov commented 3 years ago

@sjdrew Can you provide a minimal repository to reproduce this ?

sjdrew commented 3 years ago

@billyjov Sure, here you go. Just a starter ionic project and angular-draggable-droppable required.

https://github.com/sjdrew/TestDragDrop

I suspect it's due to the ionic use of shadow dom.

Thanks

umdstu commented 2 months ago

Also seeing this occasionally in a non-ionic application (angular 18), so I wouldn't assume it's ionic-specific.

LaurianeDP commented 1 month ago

I ran into the same issue, using only the related 'angular-draggable-droppable' library.

The cursor is actually using the right position, it's the preview that sees an offset being applied, this seems to indeed be related to the shadow DOM but not specific to ionic, as material was impacting my preview as well.

I found a work-around using the library's directive 'ghostElementAppendTo' which specifies the parent element to which the preview (ghostElement) is being added, I set it to the element 'ion-app' as it was sufficiently high in the DOM to not be affected by the offsets, but you could set it to the body element to be sure that positioning is correct.

I am not sure if this library has an equivalent to this directive, as 'angular-draggable-droppable' seems to be used behind the scenes, but I hope this information helps.

sjdrew commented 1 month ago

Thanks. Yes I did fork a copy of angular-calendar, added the ghostElementAppendTo in calendar-week-view.component.ts and set it to document.body and dragging element is correctly positioned.

So I guess the fix would be adding an input parameter for this.