How to REORDER List Items with Drag and Drop | Bubble.io Tutorials
Vložit
- čas přidán 28. 08. 2024
- In this video we'll look at how to use Bubble's Drag and Drop plugin to reorder a list of to dos. This is something that comes up regularly enough that is also trickier than it would seem at first glance!
Wow! Thank you. You took something really overwhelming and challenging, and made it a lot easier.
I noticed 2 possible improvements while making my own draggable list:
- you don't need to use custom state (I also prefer to avoid it when I can...), you can reference "... :item # (Current cell's index + 1)
- I feel like it's better to have the drop area between the questions rather than on top of them. Seems like it's more clear what will happen when you drop a question. In my case I positionned them right after the drag/drop group in the repeat group. And I created another drop area just before the repeat group (if you want to push something in first position)
Great stuff! Very useful. One addition for if you might want to save the list order into a data field on the individual items:
At the end of the workflow, 'make a change to a list things' -> select the Repeating Group's list -> select the data field you want to save the order number to (make it a number field, and name it something like 'Final Number') -> Final Number = Repeating Group's list / filtered [order number < This To Do's order number] / count + 1
This way, after each workflow, you're automatically saving each item's order number into a separate data field, which might be useful if you want to display this value independently from the Repeating Group itself.
Thank you for the thoroughness of this video! I appreciate that you didn't just swap the elements but actaully placed the todo where it was dropped.
Very helpful video. Many thanks! I think there is a problem. When you change the behavior of dropping on the First item, you eliminate the ability to drop something into the 2nd Position. You really need to be able to drop something in the 0th position (which does not exist) in order to place it before the first. The initial behavior was that you always placed the item after the place it was dropped. After you made the change to dropping on the first item, now it places before that, leaving a hole in the logic so that you can't drop anything between position 1 and 2.
I may be wrong, but it seems that to get the correct behavior, you need a drop area for the top half of a cell to drop something before it, and a drop area for the 2nd half of the cell to drop after it.
What a great video. I’m on my third (I think) viewing in as a many months. It’s one of those “every time I watch it I absorb just that little bit more wizardry“ type of videos. Some real brain twisting follow-along logic when tracking and changing order_numbers but, as I said, the more I watch it the more I ‘get it’.
Great video, just came across needing to solve this the other day, thanks for covering it.
Something I noticed with Bubble's drag/drop plugin is if the list is considerably longer than the viewport height, while click/holding a to-do item, you're unable to move to the top of the list to drop the item. (You can use keyboard arrows or mouse scroll while still in a drag state)
Would be great to see your solution to this problem.
Glad it helped! I'll keep that in mind for a future vid.
@@jacobgershkovich Update? Thanks!
Really nice video, 2 days I m trying to make it working , I have same issue as other with the moving items down, seems I have to go 2 drop area above (reducing position id) to move the item in correct place and can t drag to last position and first one. I review the video few times and seems everything is correct.
Nice! Only one problem I think, you suppose that "next index"="current cell's index +1" but it can be the average of 2 numbers if he has already changed place before.
Thanks 🙏
It helped a lot with an ongoing application development!
Great to hear!
Worked amazing - one item that is probably simple, but I'm at a loss, how to make a header that scroll left to right when responsive/mobile within this drag & drop solution.
Not exactly sure what you mean!
This is super helpful. Thanks. I was concerned with re-numbering all of the elements in the list.
I wonder if it would be possible to add a secondary sort on the list of todos to make the done status the primary sort, and the order_number the secondary sort. This way, you would be able to maintain the order number when an item is unchecked.
Excellent tutorial! Thanks
Thank you for all your videos!! Do you know how to make the page scroll when an element is dragged ?
Thanks Jacob, It's Awesome.... Thanks teaching in a simple way... 😘
Glad you found it helpful!
Great video, well presented, to the point and extremely useful
Glad it was helpful!
Muito obrigado, me ajudou muito e funcionou!
Opa Douglas, como funcionou no seu? Ja fiz tudo aqui, mas ainda nao funciona no meu
Drag/Drop group doesn’t stay in the Drop area, it jumps back to the its original position (unlike the desired effect as you show us at 4:29). Behavior post drop is "hide group" and "make this element droppable" is checked off. What am I doing wrong?
same issue.
Very hard to say without seeing the editor and how you've set things up. I'd recommend posting in the forum with screenshots!
Try right clicking on the droparea and "bring to front".
Can this same condition be applied to an up and down button to change the position of tasks?
Amazing video! 🙏 I have a question. Is possible reorder entries of list? I have a field with multiple entries.
Thank you! I'm not sure I fully understand the question 🤔
If you want to be able to drag items upwards you need to only increment the state of next_index when current workflow's to do < this dropdown's next index
Can you explaiin this a bit more? I am running into this issue but can't figure it out.
EDIT: I got it! I followed the exact instructions from the video, but added a small change to next_index custom state:
1. Custom State next_index = current cell's index + 1 ONLY WHEN current workflow's todo order_number < current cell's todo order_number.
2. Custom State next_index = current cell's index - 1 ONLY WHEN current workflow's todo order_number > current cell's todo order_number.
In other words, if we're dragging down, the next_index should be the row beneath the current cell. But if we're going up, the next_index should be the row ABOVE the current cell. Now it is working perfectly. Thanks!!
@@aharnisch3 thank you for this! works flawlessly.
@@aharnisch3 Thanks Al Harnisch & Jacob, it's work fine
hey man, i did everything in the video but it still didn't work, can you help me?
Make more sense store previous index in custom state and replace item before DropArea.
Dear Mr. Gershkovich, amazing content Thank You! Im binge-watching your entire channel. I have this issue: if I move,say, 5 to 2 - Number 5 will just get assigned 2.5 order_number (just +0.5). So when I drag and drop To Do's - I only see the changes to the item that im dropping and it just changes it to the Item it was dropped to + 0.5. Is there any chance you could help figure out what's happening, off-the-cuff, at a glance.. Appreciate your work!
Thanks! Really hard to tell without seeing the editor but the first thought that comes to mind is that you're calculating using the index instead of a rank field?
@@jacobgershkovich thank you!
Thanks for this 🙏
My pleasure 😊
I thought the video was excellent and managed to apply it well! I want to ask for help with a situation.
Following the example, I would like each task to have a button on the side that when clicked would reveal a repeating group of subtasks and I could order them and edicts.
Is it possible to do that?
Yup! Definitely possible.
got it here!
my editor needed a f5 haha, i put a button that reveals a group with the sub items and redo the steps.
Do you know if I can, at the end of changing the items, have a button that writes the value of the curent cell index in the order field?
I wanted at the end of the edit to save the integer values to make it more elegant.
Definitely sounds doable!
Olá, aqui funcionou praticamente tudo, a única opção que não funciona é que eu não consigo jogar nada na segunda posição, ou seja, se eu preciso mexer no segundo item, tenho que tirar ele porque não consigo jogar outros para o lugar dele. Eu fiz algo errado ou aí também ocorre isso?
Google translate is telling me that this almost worked for you but that you're having one small issue. Very hard to say what that might be without diving into the editor! I'd post your question on the Bubble forum!
Useing decimal number to beable to order you list, will cause problems in real life scenarios.
Like, I am building a Trello clone, where user can drag and drop both list and item in list.
So user is also be able to drag a item from one list and drop it inside another.
I don't think that should be a problem with this system? What challenges are you running into?
Acho que você resolveu meu problema.... Amanhã vou testar
Do you do coaching sessions?
Not at the moment but that might change soon!
yes
Thank you Jacob - this tutorial has been really helpful.
I'm getting the issue mentioned by @pingbustanut6530 were dragging up doesn't always work (in particular to be first in the list) and also noticing periodic strange behaviour when dragging down (in particular to last in the list).
Could either of you elaborate on the exact configuration settings of the suggested fix of "only increment the state of next_index when current workflow's todo is < than this dropdown next index2", as it's just a bit beyond my grasp at the moment?
Also, am I right in thinking if I wanted to have the Order_number values reset to whole numbers periodically this could / should be done via an API call?
Thanks!
Hey Marcus, Thanks for the comment and glad you found this helpful! Really tough to say what might be happening in your case without looking at the editor. I'd recommend taking this question to the Bubble forum and posting screenshots of your workflows / expressions. Regarding the order numbers resetting, a number of ways you could approach that but using a backend workflow seems like it could be a good option.
@@jacobgershkovich You're right, that would be a better way to go about it. I'll post it in the forum if I can't resolve it soon. And noted about the w/f. Thanks
Try right clicking on the droparea and "bring to front".