'Pinning a particular element using a drag and drop library in React

I am migrating from react-beautiful-dnd to dnd-kit which does not have customization to pin a particular HTML element and the others we can drag and drop.

Like in this image I can drag the Drag Me Item 2 but it can't go above Pinned Item 1.I want the Pinned Item 1 to remain fixed and it should not rearrange itself according to the other items if I drag them above it. It should always be at the 1st position.

With dnd-kit we have a disabled example like above but we still can drag 2 above 1 despite 1 being disabled.

enter image description here

My codesandbox. I was trying to keep the first card with Clauderic always pinned to the 1st position.

How can I solve this using dnd-kit or any other drag and drop library in React?

reactjsdrag-and-dropreact-dnddnd-kitreact-sortablejs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions

React Router with optional path parameter

react-dropzone: isDragReject is true when accept csv?

React: Perform action, only once, when html element is clicked

How do you re-render DatePicker with updated defaultValue?

React-Native-Maps not showing on Android Emulator or real device

Having services in React application

Recommendations to get React input test

Recommendations to get React input test

Webpack 5 & Jest - Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'

Webpack 5 & Jest - Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'

Mui-datatables Material-UI: the page prop of a TablePagination is out of range

react router's location state becomes undefined on change of route

Using webpack to load CSS files from node modules

react-number-format: Setting Default Value

You cannot render a <Router> inside another <Router>. You should never have more than one in your app