pragmatic-drag-and-drop icon indicating copy to clipboard operation
pragmatic-drag-and-drop copied to clipboard

BUG: Wrong drop target when dragging over/arround (Next.js 14 + Tailwind)

Open lucarampi opened this issue 7 months ago • 6 comments

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:

  1. Create Next.js project ´npx create-next-app my-app --typescript --tailwind´
  2. Copy all files of the example and reorganize some of it
  3. 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

lucarampi avatar Jul 19 '24 19:07 lucarampi