add option to use the cursor position rather than the centre of the dragged element as focal point

[sooxt98]

centreDraggedOnCursor works great and i was able to get the expected behaviour, but the onDrag animation auto center element animation is weird, is it possible to disable the self cantering animation and retain the element position where it start dragging?

https://svelte.dev/repl/2b0914408c564df89f8c29e827071909?version=3.35.0

https://user-images.githubusercontent.com/13378059/123606135-2c1b9600-d82f-11eb-9823-119041140279.mov

[isaacHagoel]

not sure I follow. I added darker borders so it's easier to see what is happening. https://svelte.dev/repl/d90654aa279343a9b8012b95b1a47839?version=3.35.0 it seems to me like it is behaving as expected. what bothers you? the animation of the item that puts its centre on the cursor? would u like the item to snap into place without animating? or is it something drop related?

[sooxt98]

@isaacHagoel yep the animation, i cant see the text when sorting due to the animation, everything is offset and gets overflow outside the viewport

Something like this would be nice, the dragging element is pinned on the cursor when dragging https://user-images.githubusercontent.com/13378059/123718951-ffa95d80-d8b2-11eb-8ef7-e0a55beb8b48.mov

[isaacHagoel]

it is the animation or the fact that the item positions its center on the cursor?

On Tue, Jun 29, 2021 at 10:13 AM sooxt98 @.***> wrote:

@isaacHagoel https://github.com/isaacHagoel yep the animation, i cant see the text when sorting due to the animation

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/299#issuecomment-870130665, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZCY5ET4DEU7GQFS6KSDTVEFZJANCNFSM47NPPMKQ .

[sooxt98]

Here's the original issue, the dragging doesnt respect to cursor position like trello, so i added centreDraggedOnCursor to it, but new issue came up which is the element keeps animate to the center of the cursor https://user-images.githubusercontent.com/13378059/123735570-0e533d00-d8d2-11eb-9e4d-971c4fef7d82.mov

[isaacHagoel]

I think what you are trying to say is that you would like the cursor position to be the focal point by which the library decides on where you are trying to position the dragged element instead of the center of the dragged element. Is that correct?

On Tue, Jun 29, 2021 at 2:04 PM sooxt98 @.***> wrote:

Here's the problem, it doesnt behaves like trello, it keeps animate the element to the center of the cursor

https://user-images.githubusercontent.com/13378059/123735570-0e533d00-d8d2-11eb-9e4d-971c4fef7d82.mov

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/299#issuecomment-870213743, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC6NQW5KSYWCTRAW2RLTVFA5LANCNFSM47NPPMKQ .

[sooxt98]

@isaacHagoel yes, it should work as excepted. Hence i propose this issue "title" as a workaround.

[isaacHagoel]

it currently works as expected :) removing the animation won't do what you want it to do, it would just make it snap to the same position without animating it. There are good reasons why it does not use the mouse cursor in order to decide where the item is (took inspiration from react-beautiful-dnd which has a whole blog post about it). maybe this can be added as an additional option... but it is not about removing the animation, it is about changing the focal point.

On Tue, Jun 29, 2021 at 3:15 PM sooxt98 @.***> wrote:

@isaacHagoel https://github.com/isaacHagoel yes, it should work as excepted. Hence i propose this issue "title" as a workaround.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/299#issuecomment-870242885, or unsubscribe https://github.com/notifications/unsubscribe-auth/AE4OZC3ZCG5BODJZVFRZONLTVFJHFANCNFSM47NPPMKQ .

[sooxt98]

@isaacHagoel Hi there, this is the exact behaviour i want; https://react-beautiful-dnd.netlify.app/?path=/story/single-vertical-list--basic

is it possible to make it work? the element always respect and pinned onto the cursor, and ordering based on the cursor position

[sooxt98]

The UX is so wrong with this lib, i cant get the expected behaviour, the ordering should respect to the cursor position, not the center of the elemnt, i hope it could get fix soon.

Left: react-beautiful-dnd Right: svelte-dnd-action

https://user-images.githubusercontent.com/13378059/123876496-05b04480-d96e-11eb-8f42-dff9aff7f845.mov

[isaacHagoel]

it is possible for sure. i don't think the UX is currently wrong, but looks like for this nested usecase it is not ideal. happy to get a PR if you want to add this option, otherwise I will try to make time for it. this is the blog post i was referring to btw. search for "centre of gravity"

[sooxt98]

Okay, heres the issue, left one is correct, right one is wrong; the box should moved down after cursor hover over the second element (exceed the center point)

In short: The center of each element is respect and response to cursor current position

https://user-images.githubusercontent.com/13378059/123904833-ba188d80-d9a3-11eb-8cb9-e005ae2bc168.mov

[isaacHagoel]

Okay, so not the cursor. Question: After which point on the dragged element exceeds the centre point of the element below, plus exceeds it in which direction? Keep in mind: this library (svelte-dnd-action) is not limited to vertical lists (or horizontal) or any layout. It has to have a single focal point on the dragged element that is above or not above an element in the underlying list.

[sooxt98]

Yep it should be smart enough to determine the center crossover direction (which is up, down, left & right)

Im not sure how react beautiful DND handle this senario

On Wed, 30 Jun 2021 at 1:15 PM, Isaac Hagoel @.***> wrote:

Okay, so not the cursor. Question: After which point on the dragged element exceeds the centre point of the element below, plus exceeds it in which direction? Keep in mind: this library (svelte-dnd-action) is not limited to vertical lists (or horizontal) or any layout. It has to have a single focal point on the dragged element that is above or not above an element in the underlying list.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/isaacHagoel/svelte-dnd-action/issues/299#issuecomment-871102416, or unsubscribe https://github.com/notifications/unsubscribe-auth/ADGCEC3RKB25YF5F3ZLXHB3TVKR67ANCNFSM47NPPMKQ .

[sooxt98]

I think it's fine to let user specify the scroll directions, either horizontal or vertical; then fix the center crossover behaviour

The complex part is when its in grid mode, grid mode behaves differently, here's the grid demo http://hootsuite.github.io/grid/ https://muuri.dev/

[isaacHagoel]

react-beautiful-dnd was limited to vertical and horizontal lists (which u need to specify) last time i checked. the grids in the examples behave in a way that is hard for me, as a user, predict. As i said, i'm open to pull requests or specific ideas for how to improve it. this library serves a lot of people very well with the current behaviour. The current solution for this scenarios is exactly what u tried (centreElementOnCursor). why wasn't it solving the issue for you again?

[sooxt98]

centreDraggedOnCursor works great and i was able to get the expected behaviour, but the onDrag animation auto center element animation is weird, is it possible to disable the self cantering animation and retain the element position where it start dragging?

https://svelte.dev/repl/2b0914408c564df89f8c29e827071909?version=3.35.0

Screen.Recording.2021-06-28.at.4.37.31.PM.mov

@isaacHagoel overflow issue, i cant see the text while dragging

[isaacHagoel]

This is specific to this situation though, no? The list is at the edge of the page. the items are way wider than the would be in any real UI. the text is not centred etc.

In any case, I don't plan to make drastic changes in this area of the code in the near future. Maybe in version 2.0 if that ever happens. I do think that the current implementation works great in a wide array of use cases.