shouldAcceptDrop not detecting that element is dragged over

[corus-development]

I have a left sidebar ~200px that contains Container. Items are being moved to it from the main page content:

• Draggable items are ~700px wide
• dragHandle is at the top-left corner of the Draggable items (which means that when dragging, the cursor is at the top-left corner of the Draggable)

When I move Draggable over the Container, neither shouldAcceptDrop nor onDrop are triggering - looks like because of the width mismatch between the Container and the Draggable. Only when I move the cursor more to the left, far beyond the Container (so the middle of Draggable aligns with the middle of the Container) - these methods trigger.

It looks for me that only the center part of the Draggable is being detected when calculating that it's being over the Container. In my case this never happens as the narrow Container is at the left edge of the screen.

I've tried changing Draggable dragClass (decreasing width) and also modifying the ghost width onDragStart (with timeout and querySelector - but it's not working either.

Is there a solution for this?
Any help will be appreciated!

[pierre-b]

Hi, I've same issue with vertical drop, my draggable is very high, and the center of this div cannot reach a container to trigger the drop placeholder. I tried to scale down the "ghost" with CSS but it still uses the original content size before the drag.

It would be great to use the center of the ghost to compute eligible landing containers.

[pierre-b]

A solution would be to use the mouse "click" position of the drag handler. People will always move the pointer to the landing zone.
What do you think @kutlugsahin ?
Thanks for your help

[pierre-b]

PS: looks like it's almost there: https://github.com/kutlugsahin/smooth-dnd/blob/master/src/container.ts#L216

[kenbankspeng]

rcdexta has a forked JS version of smooth-dnd that works, which is the core of react-trello.

kutlugsahin has converted the smooth-dnd effort to TS, but in doing so has effectively broken the getPosition function in its end purpose for many scenarios, this issue describing one of them.

Considering that like so many libs, maintenance is dropped, (including react-beautiful-dnd which is now broken for kanban on mac chrome) the only way I could proceed is with using the rcdexta JS version and the react wrappers from /dnd folder of react-trello.

Although the TS efforts may overall be better, for me it's current state is unusable, but the JS version works great.

[jtzikas]

Anyone with a workaround? I have a similar issue in one of my projects.

[pierre-b]

hi @jtzikas , I ended-up copy-pasting the whole code into my project, and uncommenting this line: https://github.com/kutlugsahin/smooth-dnd/blob/master/src/container.ts#L216

It worked for me...

[jtzikas]

Thanks @pierre-b.
I was hopping there was a way to avoid copy/pasting the entire project.

[kenbankspeng]

One could fork it, make the suggested modification, build and publish it to npm, and use the modified library in your project.

[pierre-b]

If you look closely, this lib contains 2 files and is not maintained, it's in your interest to copy/paste these 2 files and remove this dependency from your project.

[kenbankspeng]

I agree. I've re-written these 2 files as functional components. Was thinking of forking https://github.com/kutlugsahin/smooth-dnd

Sadly, this is about the 20th library that I've seen go by the wayside. Ecosystem moves so fast.