Please help us populate examples for different stacks 🤝

[alexreardon]

Prior conversation

We have created a simple list example with reordering that shows off how to use Pragmatic drag and drop on a non-Atlassian stack.

If you are interested in helping out, it would be great to have this simple list example ported to other frontend tech stacks!

Things like:

• svelte
• angular
• vue
• solid
• vanilla

As well as these technologies, it would be great to see the usage with other styling solutions too!

Steps

• Check out our examples page to see what stacks have already been done
• Take a look at our simple list example to see how the list should behave and be styled
• Create the same (or mostly similar) example in your stack of choice

Submission

When you have finished your example, it would be great to grab the following details:

• What technologies you used
• Repo URL (or just a link if it was created in an online editor)
• Standalone URLs
• Author(s) and urls you want those author names to point to

The plan is to include these entries on our examples page

Cheers!

[dotnize]

Hi! I've created a SolidJS port which is mostly just copy-pasted from the React example with Tailwind.

Technologies: SolidJS + Tailwind CSS + Vite + TypeScript
Repo URL: https://github.com/dotnize/pdnd-solid-tailwind
Standalone URL: https://stackblitz.com/github/dotnize/pdnd-solid-tailwind?startScript=dev
Authors: @dotnize & @alexreardon for the original React example

[alexreardon]

Added to our examples site

[frenicohansen]

Hi, I ported the react's example into Vue 3 and Nuxt 3.

1. Vue 3
   • Technologies: Vue 3 + Tailwind CSS + Vite + TypeScript
   • Repo URL: https://github.com/frenicohansen/pdnd-vue
   • Standalone URL: https://stackblitz.com/github/frenicohansen/pdnd-vue?startScript=dev
   • Authors: @frenicohansen & @alexreardon for the original React example
2. Nuxt 3 : https://github.com/frenicohansen/pdnd-nuxt
   • Technologies: Nuxt 3 (SSR) + Tailwind CSS + Vite + TypeScript
   • Repo URL: https://github.com/frenicohansen/pdnd-nuxt
   • Standalone URL: https://stackblitz.com/github/frenicohansen/pdnd-nuxt?startScript=dev
   • Authors: @frenicohansen & @alexreardon for the original React example

[alexreardon]

I'll add these to our example site. Thanks!!!

[taismassaro]

hey @alexreardon, thanks so much for this library and the examples provided already!
would it be possible to add a unit test example to the simple list repo as well?

I've created a sortable list component that takes a list of items and an onDrop callback and I'm trying to add a basic unit test with react testing library that checks the order of the dom elements and that the callback is called. I added the polyfill package, but I cannot seem to understand what I need to do from the example in the testing documentation.

I know that ideally this interaction should be tested in a browser test, but we're on an unconventional (Rails+Capybara) stack for integration tests and I would like to ensure the basic functionality of reordering is covered by unit tests.

[alexreardon]

I've recently shared a new example. It leverages a "shadow" drop indicators (like what Trello uses).

⚠️ Using "shadows" does not scale well to non-list based experiences, and is more complex to get working well

• Technologies: React, Tailwind, Lucide
• Repo URL: https://github.com/alexreardon/pragmatic-board
• Standalone URL: https://pragmatic-board.vercel.app
• Authors: @alexreardon

[hungify]

Hi! I've created a Vue and React to implementation of the Pragmatic custom preview.
This effectively addresses the issues of native drag preview items across various browsers and devices.

Technologies: Vue 3/React + Vite + TypeScript
Repo URL: hungify/pragmatic-custom-preview
Standalone URL: pragmatic-custom-preview.netlify.app
Authors: @hungify

[downright-development]

Hey team - any progress on other more simple examples? In particular I'm after the tree product.
It's quite difficult to integrate this lib compared to others TBH

[dysbulic]

I ported the example to a simple Svelte app:

Technologies: Svelte 5 + Tailwind CSS + Vite + TypeScript

• Repo URL: dysbulic/svelte-sortable
• Standalone URL: dysbulic.github.io/svelte-sortable/ (StackBlitz won't start even after downgrading Node & pnpm)
• Authors: @dysbulic & @alexreardon

[manu180]

Hey,

I've recently started using pragmatic-drag-and-drop for a PoC. It leverages the list-item hitbox for reordering nested lists.
It features:

• reordering of groups
• reordering of items
• generate new group when item is being moved in between two groups
• remove empty group when its last item is moved away from it

Technologies: Typescript, React, Tailwind, Lucide
Repo URL: https://github.com/manu180/pragmatic-nested-list-example
Standalone URL: https://pragmatic-nested-list-example.pages.dev
Authors: @manu180