pragmatic-drag-and-drop
pragmatic-drag-and-drop copied to clipboard
BUG: Wrong drop target when dragging over/arround (Next.js 14 + Tailwind)
First of all, this is me package.json file:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
"@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.0",
"@atlaskit/pragmatic-drag-and-drop-live-region": "^1.0.6",
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.1",
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"immer": "^10.1.1",
"lucide-react": "^0.408.0",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",
"sass": "^1.77.8",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
"tiny-invariant": "^1.3.3"
},
"devDependencies": {
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "14.2.5",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"typescript": "^5"
}
}
I started from the tree example on the official docs: https://codesandbox.io/s/h6jq8r?module=/example.tsx
Then I did the following steps:
- Create Next.js project ´npx create-next-app my-app --typescript --tailwind´
- Copy all files of the example and reorganize some of it
- Removed all
css
props an replaced with TailwindCSS I did other things after this, but at this point, I was no longer working...
One thing that I noticed is that the extractInstruction()
can get the write location to place the dragging element... sometimes...
In my model, I have a root element and items con only be placed inside it.
Demo: https://github.com/lucarampi/pragmatic-dnd-issues/tree/Issue%2392
~The drop-indicator
is going to the wrong place. If I start dragging a child with index N it applies the wrong padding to the drop-indicator
~ -> Just created a new project and magically worked, no idea why.
Edit: About the drop-indicator
, there was a "relative" in the wrong place