Draggable is detectable by dropzones out-of-view in a scrollable area

[owenfar]

Hi @taye , I went ahead and opened an issue here so that it has more focus, and because I think it's probably a bug.

As mentioned in Gitter; dropzone elements that are out-of-view in a scrollable area can still detect draggable elements even though they are not visible: See demo here: https://jsfiddle.net/hod2kL7u/3/ .. Scroll one of the dropzones so that it's out-of-view, then try to drop the draggable item above the scrollable area. You'll see that it is still detected by the dropzone that is "not visible".

I tried quite a few different ways to eliminate this, but so far no hack I implemented worked for my scenario, especially since the scrollable area can be above another larger dropzone.

Please let me know if I can help, and if you have any ideas for a quick patch I can implement.

Expected behavior

Dropzones that are out-of-view inside scrollable areas should become inactive and do not detect draggable elements.

Actual behavior

Dropzones detect draggable elements even when they are out-of-view and not visible.

System configuration

latest interactJS version: Tested on all latest major browsers (Chrome, Safari, FireFox, Edge): macOS Catalina 10.15.6:

[taye]

Thanks for making the demo. You can use a custom drop checker to check if the the draggable is inside the scrollable element: https://jsfiddle.net/zdb2nxwp/

function (
  dragEvent,         // related dragmove or dragend
  event,             // Touch, Pointer or Mouse Event
  dropped,           // bool default checker result
  dropzone,          // dropzone Interactable
  dropzoneElement,   // dropzone element
  draggable,         // draggable Interactable
  draggableElement   // draggable element
) {
  if (!dropped) { return false }

  const draggableRect = draggableElement.getBoundingClientRect()
  const scrollableRect = dropzoneElement.parentNode.getBoundingClientRect()
  const margin = 20

  const isInsideScrollable =
    draggableRect.top < scrollableRect.bottom + margin &&
    draggableRect.bottom >= scrollableRect.top + margin &&
    draggableRect.left < scrollableRect.right + margin &&
    draggableRect.right >= scrollableRect.left + margin

  return isInsideScrollable
}

[taye]

I'll leave this issue open and I might add a fix for it to the library later.

[owenfar]

Thanks a lot @taye , it works great! I wouldn't have thought about using a checker.

I think that having this by default within the library is probably better as the current behaviour is not what we would expect it to be - in my opinion :)

[dellyn]

But this solution is not working unfortunatelly...

[owenfar]

So far it still works for me but I have to check which version I'm using. Can you send the updated jsfiddle link in the meantime? I can check tomorrow and let you know @dellyn

[owenfar]

@luckyrajkumar98 please send some examples and explain better. I'm not sure that your issue is related with this one though

[owenfar]

@luckyrajkumar98 This is very hard for me to just look at and understand how I could find the issue. I didn't write this library. I can try helping you out if you put and example for me on CodePen or JSfiddle so that I can immediately understand what's the problem, and also modify the code if necessary.

But at the same time, please make sure that this is related with the opened issue. I don't think synch between speed of cursor and div is related to this. If you need help with that specific issue, it's better to open a new ticket and provide a better showcase.