search

hootsuite / grid

Drag and drop library for two-dimensional, resizable and responsive lists
http://hootsuite.github.io/grid/
Apache License 2.0
3.57k stars 281 forks source link

Finding new position is triggered too late in jQuery plugin when only having one lane #80

Open silllli opened 8 years ago

silllli commented 8 years ago

When there is only one lane in the grid, finding a new position for items is triggered too late when using the jQuery plugin. It works fine with the first item next to the one that is dragged, but the second already has a wrong "trigger point" - it looks like the dimensions of the item underneath the dragged one are calculated incorrectly (one cell falsely added).

This only happens when moving an item left to right (horizontal grid) or top to bottom (vertical grid) and not in the other direction.

Here you can see the behavior (please ignore the strange image jumping in the beginning): grid

andrei-picus-hs commented 8 years ago

The problem lies in how we rebuild the grid when we can't reposition the items underneath the dragged item. What happens is the following:

  1. You drag 0 over 2.
  2. We empty 0 current spot and place it on the new position.
  3. The grid now looks like empty spot | 1 | 0, 2 | 3, | 4 | etc
  4. We see that 0 collides with 2 and try to move 2 around.
  5. By moving 2 around it collides with 1 or 3.
  6. Solving collisions has failed so we need to rebuild the grid.
  7. We sort all the items trying to preserve columns.
  8. The items are now 1 | 0 | 2 | 3 | 4 | etc. <- when 2 items have the same positions we order them by their index.
  9. We place 0 in the desired position (x = 2, y = 0).
  10. We start looking for a spot for 1.
  11. It's the first item in the sorted list so we put it at x = 0, y = 0.
  12. We start looking for a spot for 2.
  13. We try to preserve its previous horizontal position so we start comparing it with the items we've placed so far.
  14. We compare it with 1 and we decide it should sit after it.
  15. We compare it with 0 and we decide it should sit after it. <- because 0 comes before 2 in the list.
  16. No more items to compare to so we place it at x = 3, y = 0.
  17. We place the other items after x = 3.
  18. We finish placing all the items. Now they look like 1 | empty spot | 0 | 2 | 3 | 4 | etc.
  19. We pull the items to the left to get rid of empty spots.
  20. The final list looks like 1 | 0 | 2 | 3 | 4 | etc.

There's no easy fix for this without redoing our positioning algorithm.

/cc @ovidiu-chereches-hs

silllli commented 8 years ago

I see. Thank you for pointing it out!