Repository navigation
can't drag between 2 grids with max row set #1687
Description
Subject of the issue
Widgets collide and bug over each other when hovering over another grid
Your environment
Gridstack (the verison used on the official site) sorry dont know that one) (V4 if im not mistaken) <- 4.0.1
Chrome Version 89.0.4389.90 (64-Bit)
Steps to reproduce
https://gridstackjs.com/#demo
when moving the item from top to bottom (i hope thats eough to reproduce)
Expected behavior
Widget does not collide with others and just can correctly place back like in the previous v3 versions
Actual behavior
When dragging one widget to another grid and then back (without releasing it) the widget will come nearly impossible to place back in the old grid and even collid or stack on to another object.
Its also happening when just dragging it into another grid.
You can also see the collision happening here https://gridstackjs.com/demo/advance.html
p.s im sorry if im not giving enough information.
if you need anything more please comment
Activity
adumesny commentedon Mar 27, 2021
can you please provide a video because I'm not seeing your issue. you can also try using https://gridstackjs.com/demo/two.html or a modified version if you need 2 grids.
Justin99b commentedon Mar 27, 2021
Actually i found out how to reproduce it
https://jsfiddle.net/rhq02fkL/29/
https://gyazo.com/de4abc0265c37760a7e8e8b71338b7ab
[-]Dragging widget to another grid makes it impossible to place[/-][+]two drop shadows when dragging between 2 vertical grids[/+]adumesny commentedon Mar 27, 2021
should not see two drop shadow when #393 was fixed....
Also see issues with your demo outside of this:
resizable:falseis NOT an options - usedisableResize:trueinstead (I can see why you made that mistake)regardless I can see 2 drop shadows when doing vertical grids, so I will create demo for that so I can fix.
Justin99b commentedon Mar 27, 2021
oh? Well im working on an inventory system with gridstack and use addGrid to dynamicly add grids. didnt know that this is the wrong way of doing it
addGrid() checks for nested '.grid-stack' div
Justin99b commentedon Mar 27, 2021
Okay i've updated my example with your fixes named just to make sure its correct
https://jsfiddle.net/hfjr65qw/32/
Also its not only the drop shadow
here is a video of it happening in a different scenario. but you can recreate it with the link above
This example is even more broken than my version somehow lol
https://gyazo.com/3aa64bfd28f08147595a66440fff6a81
https://gyazo.com/a77811b3982037bf013b5653b2003a5a
adumesny commentedon Mar 28, 2021
I know, but that is the clue bad things will happen!
Update: actually the real issue with is with
row:1setting maxRow which goes through very different code path I had not tested[-]two drop shadows when dragging between 2 vertical grids[/-][+]can't drag between 2 grids with max row set[/+]collision: `row / maxRow` drag 2 grids
adumesny commentedon Mar 28, 2021
fixed in next release. don't forget to donate if you find lib useful!
Justin99b commentedon Mar 28, 2021
If my projects works out and dont forget it i will donate you something 😄
I checked out the master after you pushed. It seem to work way better than before
Im still having problems with the shadow tho. i have a 1x1 field to drop an item into.
besides the fact that 1x1 fields dont work at all in v3 and in v4 with your fix it works somewhat
Sometimes the drop shadows still wont dissapear. I will test this further and make sure to make a demo for you
Do you mean 4.0.3 or master when you say release?
adumesny commentedon Mar 29, 2021
4.0.3
adumesny commentedon Mar 29, 2021
a change in 4.0.3 broke my example (like yours).... will have to revisit this. Lot more work than expected. Get that donation going...
collision: more 2 grids with maxRow
collision: final 2 grids with maxRow