In some tutorials, they say that responsive pages should not be fixed, but if we do that, we can’t drag & drop because the group goes up in a fixed spot. But, I am seeing some videos that you can actually drag & drop groups.
Hi Nickc,
While you are at this, would it be easy or possible to add a way to trigger actions when drop area is dragged over? Right now there is only a “drop area has group dropped on it” event.
What I am trying to do is to create an UX for a kanban board where user is dragging the column around to arrange the board. When the user drag over a drop area, an empty area expands to indicate the drop area.
Right now I am having an empty RG column with drop area in there. The idea is when this drop area is dragged on, it will expand to show a bigger empty area. But I am having problem to have it stay open. My initial drop area is small (10px), when it is drag over, it expands. But as soon as I move the drag/drop group a bit more, the drop area closed again, making it almost unusable for user experience.
If the drag over can trigger an event, then I can use set state to keep the drop area open (I assume).
Do you have suggestions? Is there a work around? Or can that be a feature? While research this, I saw many users using this to build kanban board. It will be a great UX enhancement. It will also save me a tone of time too.
Also, my app is for both desktop and iPad. The responsive engine works well on the desktop. However, once it is on ipad, it:
- loads the RG very slowly;
- some of the scrolling that is working fine on desktop, doesn’t work on iPad
Thanks!
Grady
Hello Grady and @stefan1 ,
I suppose that @nick.carroll did an update because I was able to make my drag&drop element responsive as well as to change the size the drag&drop area.
2 Likes
Hi Elena,
Thanks for posting the screen video. Yes, I agree that those are working. I was describing a different situation. From the video you are showing, I can see that the drop area box expanded. However, I want the drop area box to stay open and allow me to move the drag item in there. My drop area was initially set to 10px wide. Then a column of 320px is drag on it to make the 10px expand to 320px. There is a point where the 320px column drag over the 10px column, and the 10px column expanded. However, if I move the column a few more px over, the expanded column shrank back to 10px. I was expecting that after the 10px column expanded, I will be able to drag the 320px in it with more “room” before it shrink back to 10px. So, I don’t think it is a bug but want to see if there is a way I can make the expanded column stay expanded for longer when I move the column over it.
Also, when I run the app on iPad, what was working fine on the desktop suddenly took very very long time to load and sometimes frozen… Particulary, I was using the Max Height xx% to make it vertically responsive to viewport height. I did another version without using this. Then it works fine on iPad.
Another situation is that after I drag a card in a kanban column to another kanban column, it was copied over properly. However, for some reason, it won’t show the copied card immediately. I need to click something or drag the screen for it to “refresh”. Then the card shows up. I was using my board for a while for testing. It only started having those situations recently. Again, this non-refreshing doesn’t happen all the time. It only happens sometimes.
I have switched back to the old responsive way for now. But still the page not being able to refresh immediately sometimes is a problem.
Thanks for your help and hope to get a response or suggestion from you soon.
Regards,
Grady
Hello Grady,
10 px to 320 px: Have you tried with the conditional: When my drop area XYZ is not empty.
Or (that solution works on my side):
DropArea: Min width 10 px, Max width 320 px, fit width content.
Drag&drop group 300 px
Ipad issue: I have no clue
Refresh: I have no clue too.
I hope it helps but I am a very basic user
Cheers,
Elena
Thanks for the response. 