Cached drop boundaries prevent collision detection on scroll

[Cyara-Andrew-Watson]

Describe the bug I have a long list of draggable items, which also serve as the drop targets, in order to be able to use dragselect to sort them. As it's a long list, some of the items are off the screen when the drag begins. If I select an item, then drag it down so that the auto-scroll kicks in and the rest of the list is exposed. Then the items that I moved over to make the list scroll are no longer detectable in the update event. I need to do this, so that I can show a drag-over state, to indicate to the user where the dropped item will go.

To Reproduce Here is my code, that I am using to store the id of the dropzone that the mouse is currently over It works great until the area has been scrolled, then the getZoneByCoordinates starts to fail (unless I scroll back to where I started to drag from)

ds.subscribe('DS:update', (e) => {
            if (e.isDragging) {
                const dz = ds.getZoneByCoordinates()
                if (dz?.id && !selectedItems.has(dz.id)) {
                    setDropAfterUid(dz.id)
                } else {
                    setDropAfterUid(undefined)
                }
            }
        })

I tracked the cause to the DropZone class, which has the rect() method as:

  public get rect() {
    if (this.isDestroyed) return undefined
    if (this._rect) return this._rect
    return (this._rect = this.element.getBoundingClientRect())
  }

You can see that the rect once found is cached. But after the scroll has kicked in, the getBoundingClientRect() returns different values - thus the isCollision method in _getZoneByElementsFromPoint returns false for the mouse position after the area has scrolled (and the mouse has not been released)

Expected behavior I doctored the code to ignore the cached value, and then getZoneByCoordinates worked during auto-scroll as I expected.

You should be able to view the desired behaviour here: https://drive.google.com/file/d/1QW8APqtOhIVMJR4ByI1PCAzh8wJ1Px2D/view?usp=sharing

[ThibaultJanBeyer]

Hey @Cyara-Andrew-Watson would you be so kind to create an example to reproduce the issue? I tried it myself but somehow it seems to work as expected or I am not understanding your description. I understand the desired behaviour I think but I don't understand the "buggy" one. As you can see in this pen: https://codepen.io/ThibaultJanBeyer/pen/eYwNagR I tried to recreate what you were describing but as you can see the correct elements are selecting when hovering also when scrolling (see output top right) 🤔

https://github.com/user-attachments/assets/78425b0f-58cc-46c5-948f-94f097c506ed

(there was a little hiccup on the 4 once but dunno if that's what you mean)

[Cyara-Andrew-Watson]

Hmm... yeah, I can't reproduce it there either... either I am mistaken as to the cause, or there is some missing element - I'll let you know if I figure it out.

---

From: Thibault Jan Beyer @.> Sent: Monday, 15 July 2024 02:21 To: ThibaultJanBeyer/DragSelect @.> Cc: Andrew Watson @.>; Mention @.> Subject: Re: [ThibaultJanBeyer/DragSelect] Cached drop boundaries prevent collision detection on scroll (Issue #225)

Hey @Cyara-Andrew-Watsonhttps://github.com/Cyara-Andrew-Watson would you be so kind to create an example to reproduce the issue? I tried it myself but somehow it seems to work as expected or I am not understanding your description. I understand the desired behaviour I think but I don't understand the "buggy" one. As you can see in this pen: https://codepen.io/ThibaultJanBeyer/pen/eYwNagR I tried to recreate what you were describing but as you can see the correct elements are selecting when hovering also when scrolling (see output top right) 🤔

https://github.com/user-attachments/assets/78425b0f-58cc-46c5-948f-94f097c506ed

— Reply to this email directly, view it on GitHubhttps://github.com/ThibaultJanBeyer/DragSelect/issues/225#issuecomment-2227402293, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AQEIWWEGK4VXGFWPKNSJHQDZMKQO3AVCNFSM6AAAAABKESMISOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRXGQYDEMRZGM. You are receiving this because you were mentioned.Message ID: @.***>