How I implemented drag and drop for re-ordering lists in Next.js
Вставка
- Опубліковано 24 кві 2024
- github.com/hello-pangea/dnd
My Products
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
DND Kit is a beast
the react integration for DND kit won me over from what you have here in the project. I think it's worth investing the time to switch.
hmm I'll check it out
I was trying to create something similar to jira cards and tried dnd kit but i quite didn't understand how to use it, so i implemented one my self
I have built some incredibly advanced drag and drop things for a customer, and I can tell you dndkit has made things much much easier than anything else. In my opinion, there is no competition in this regard, it just works. React Drag and Drop is so out of the question now that dndkit exists.
used dnd kit in my project, but the HTML5 depedency conflicted with some of the other libs in the project and unfortunately there isn't a known workaround so far :/
Going to be implementing this eventually in my project so I'll definitely come back to this when im there
I swear we keep working on the same features lol. I implemented drag and drop using atlassians "pragmatic-drag-and-drop". It's what they use for jira and trello. It's only just been released so the examples in the docs are heavily using the atlassian component lib, but the hooks and providers were quite nice to work with.
I'm currently working on inplementing a drag and drop form builder, always handy seeing how you implemented things if you fancy working on the next ;)
Dnd is great! I’m using it in one of my apps and it was great to implement & use
OMG. It's just like what I am looking for. ty man
I picked "dnd kit" and I'm pretty happy with it
I’ll have to check it out. Everyone says it’s good
Sure, dnd kit is great, but it seems to be dead. The author was working on a major update, however it seems that he has lost interest or is just lacking time.
Used dnd kit for my app, very simple and great for mobile support
Man i legit today was having issues with this lol, but sadly you didnt make it so i can drop card from one container to another, how do i do that?
Good job babe!!!
Interesting video, thanks for sharing!
I'm just wondering how you persist the order to the database? I remember implementing a DND list in one of my projects using postgres to store the data, and my solution worked, but I didn't like it that much, as I had to persist an additional array of ids which represented the order of items.
I have an order column on the record, and I just swap the two order values if you drop an item over another one. When I add new items, I find the highest order value and just use that + 1
Reading this I thought a unusual way to optimize that is using a timestamp column. Then when drag and dropping you would swap the values but when creating a new item you would set a defaultNow to the column, witch will be the greatest value.
@@WebDevCody uh that's an interesting approach, looked a lot on the web to figure the db structure for that and this seems handy unless you gotta make lots of move operation at once
@@WebDevCody actually that means yeah have log(N) updates when moving an item 'cause you need to update all orders of every item. Like if I move an item from order 10 to 0, 0 becomes 1, 1 --> 2, 2 --> 3 and so on
Is the same thing for drag-drop rows in the MUI table?
I just did something like this with that library in Next.js. Used Zustand to store the indexes, which worked great until I realized the list had to wait for hydration every time the page reloaded. So ended up using a combination of Zustand and cookies that I had to pass down from server components. It was quite a pain :/
Extremely simple to use Reorder component of framer-motion you should try it
But framer-motion is not that lightweight so i guess depends what you want, but implementation much much simpler
Anyone know what vscode theme is this?
The down-side to this and dnd kit is that you cant drag things into other things, think dragging songs into playlists in apple music or files into folders on mac.
native html dnd is also terribly implemented and not worth using. I've been just defaulting to native mouse down, mouse up, mouse move, mouse over handlers, like notion does, and is what is the most versatile and easiest form to implement dnd
hello-pangea is only superior if youre only doing lists and never plan to go further with dnd.
Its a bit out of context for this video but had a doubt regarding tanstack query version 5. I noticed when I create custom fetch hook and fetch data using tanstack queries from the server, the data is not updated and does not show when I inspect the page source. So right now for one of my blog projects I initially implemented tanstack query to create custom client side hooks to fetch data from sanity server but the data is being fetched and shown correctly on the page but the page source is not updated... was wondering whether you knew a solution for that..... sorry for dropping this comment on this video....... commented cuz saw ur using tanstack version 5 for this project of yours
So if you inspect the network request in chrome, does the data coming from sanity seem up to date but the useQuery has old data? You may need to disable caching on the query config
@@WebDevCody yes I get the correct req back when I check the network req but since I am sending req from client side through a custom hook it does not update the page source unless I prefetch the queries somehow…
After watching this i am thinking a sort of complex problem.
Let's say we have modules and modules can have n chapters.
Chap have have modulePosition as well as position which global position
So sorting modules would changes order of everything
Framer motion reorder is my go-to
Interesting, I’ll have to look into this because I need to do this but it just seems so unnecessary
May I request a video about a form of sub-forms where you can add and delete subforms without losing the input values? Trickier than it sounds, because if you delete from the middle, then the ones from the bottom will lose their state. I am stuck on this, please help a pal out 😢😢😢
I’m not sure what you mean honestly. Why would deleting a sub form cause another one to lose state?
@@WebDevCody I wasn't too clear, sorry. So, imagine you have a "main" form what represents a submit of a batch of jobs. The "main" form has got "sub" forms, where each of them represent one job of the batch. The "main" form starts with one "sub" form and you have one button on the "main" form to add dynamically a new one, and each "sub" form has a button to remove itself.
Now, the react way would be a shared state of a react.element array, and we .push a new element or .pop the one we want to remove.
We return this array of "sub" forms with .map, and (me naively) using the index as key.
When we mutate the state of element array, then the DOM re-renders again, and there each "sub" form gets a new key property assigned (which is the index from the .map), and that is where the "sub" forms don't always keep the already inserted values in the input fields.
It seems like brain sharting, but maybe more understandable 😃
@@WebDevCody It's an array of "sub" form components, which we return with .map in the "main" form,l dynamically, and assigning the index as keys. Now if we already have values in the "sub" input fields, and we .pop the "sub" form with index 2, then the rest of the "sub" forms with index 3 and 4 will have different values (or none) in their input field, because they will get a new key in the next re-render.
where on earth is @SeibertSwirl comment 😩😩😩
Ok so the whole UI drag-and-drop