dnd kit

Underrated drag and drop UX detail: Slightly rotate items while you drag them. It feels physical, playful, and instantly clear what’s happening. TBF, drag and drop is sooo tricky to nail. At define we use @dndkit. Thank you @clauderic_d!

Free @shadcn Data Grid with 20 advanced examples built with @tan_stack table and @dndkit: - Wrapper for TanStack table - Fully customizable table, row & cell - Drag & drop: rows/columns - Pinnable & movable columns - Local & remote data support - Rows selections - Movable columns - Columns visibility - Sticky header - Horizontal & vertical scrolling - Expandable rows and more...

@puruvjdev @ClintFix next.dndkit.com/overview

@ClintFix @dndkit Oooh is there any reference to the new API design?

Question: What are your favorite drag and drop libraries, and what are your biggest beef with them? React, Svelte, Vue, Angular, Vanilla, whatever comes to your mind More responses could mean a kickass library later this year 👀👀

Just open-sourced PositionObserver – the missing observer to detect position, size & visibility changes. ⚡️ Async & efficient — zero polling, powered by native observers 🎯 Track elements relative to viewport or any root element Try it out 👉 npm install position-observer

I just updated the TanStack Table drag and drop examples to use @dndkit along with a new column ordering guide with recommendations on how to achieve best results when combining TanStack React Table with DnD libraries.

@dndkit is simply amazing. Building this new sortable task list for @saas_js blocks.

Drag and drop ✨ Never roll your own. It's always a mistake. So what do we use?

dndkit is great btw I’ve been implementing database-persisted ordering, and @dndkit has been a breeze to work with - including optimistic updates dndkit.com

Hi everyone! Just a quick preview of the next video project: PageForm. It's a fullstack drag-and-drop web form builder that allows us to create forms, share them, and collect submissions. We will also implement a custom ( and simple ) validation logic for our forms. Stack: - @nextjs ( with server actions ) - @reactjs @typescript - @tailwindcss - @shadcn /ui ( what an amazing library ) - @dndkit - @prisma - @vercel (deploy and postgresql storage ) This is not a clone: I've just made this project for the upcoming video. I plan (and hope) to release the video in 1 week. Hope you like it, and let me know what you think 😃 Ps. Video will be available on my youtube channel: codewithkliton

@peteduncanson This is something that is actively being worked on, expect things to be easier to setup and more robust in the near future. Refer to this post for more details #issuecomment-1696704815" target="_blank" rel="nofollow noopener">github.com/clauderic/dnd-…

Is it just me that finds @dndkit bloody quirky to use. If its not just right it does some very odd behaviour and then no way to know why. CSS hell I think with my Overlays. Got to be a better way.

@pagebakers Using index as key perhaps? As opposed to a stable key

Any @dndkit ninja's around here? Why is the drag handle flying up too much when sorting up? Is it calculating its center incorrectly?

@philkellr @phuctm97 Touch devices are supported yes. There are two sensors that can be used, either the Pointer sensor which supports any pointer input (including touch), or a dedicated TouchSensor docs.dndkit.com/api-documentat…

@phuctm97 does @dndkit support mobile? I opened their homepage and the items were not draggable (it marked the text instead) And in their doc they say that touch devices are not supported.

My current frontend toolings: Tailwind • tailwindcss.com Radix • radix-ui.com React Icons • react-icons.github.io Recoil • recoiljs.org Slate • slatejs.org dndkit • dndkit.com react-window • react-window.vercel.app

✨ First Article Learn how to use the @dndkit library to build beautiful & accessible drag-and-drop interactions in React: kxlaa.com/posts/drag-and… The article includes many interactive demos that should help explain the concepts:

Finally got drag and drop working in Daybuilder 🎉 I was worried this would be really tricky. But @dndkit actually made it quite simple. h/t to @clauderic_d for a building an awesome open source library for this 🫡

Blocks can be reordered via drag-and-drop. Thanks to the awesome @dndkit library.

@maccaw The cool kids use dndkit.com 😎

What are all the cool kids using for React drag/drop these days?

Album Rotation - Organize and visualize your favorite albums 💿 albumrotation.com Uses: - @dndkit for drag & drop (dndkit.com) - React Spring for delete animation (react-spring.io) - Local storage for persisting album artwork

@codylindley @react @clauderic_d Nice! You should add the CSS property `touch-action: none` on your board pieces so the browser doesn’t try to scroll the page when pieces are picked up on mobile. You can learn more about that here: docs.dndkit.com/api-documentat…

I love the drag and drop wizardry you've casted with the @react dnd kit (dndkit.com), @clauderic_d! It makes it trivial to build a drag and drop game! codesandbox.io/s/misty-silenc…

@Awnton Open an issue :) There’s a couple known reasons why that can happen, for example, when you use useSortable within your DragOverlay component

@dndkit aaand ran into a weird issue where the entire drag n drop just stops working after doing a couple of specific things 🙃 well, a problem for some other day I suppose

third time I'm rebuilding this drag n drop interface and it's starting to shape up. switched from react-dnd to @dndkit by @clauderic_d and it's *chefs kiss*. looking forward to working on something else soon though :D