Beginners Documentation

[Iknewthatwouldhappen]

Hello all,

Can someone please post an example of how to get any of the examples on the solid-dnd webpage to work in a default solid-js install? I can't for the life of me get any of them to work and am struggling to figure out where to paste the code, what other depencies might need to be installed.

I get errors such as: Type [blah blah] is not assignable to type HTMLattributes. And Property use:sortable does not exist on type HTMLAttributes. Along with: Type '(draggable: Draggable$1) => Element' is not assignable to type '(Element | ((activeDraggable: Draggable$1) => Element)) & Element'.
Type '(draggable: Draggable$1) => Element' is not assignable to type '((activeDraggable: Draggable$1) => Element) & number'.
Type '(draggable: Draggable$1) => Element' is not assignable to type 'number'.

A working example of the sortable lists would be great. I'm trying to put this in a solid-js build with routes and ideally have dnd on a separate dnd.jsx page.

I used npx degit solidjs/templates/ts-router my-solid-project for the solid js install.

Thanks in advance.

[ZanzyTHEbar]

I second this, it would help a lot. The library is kind of all over the place and full of type errors when using typescript - the examples from the website work, but are full of type errors. Would be nice to have actual documentation.

[ShivamJoker]

Exactly!

[martinpengellyphillips]

One day I'll write docs, one day. But it's a hobby project so I work on it when I'm energised to 🙂

@Iknewthatwouldhappen does it actually run through? Those look like typing errors so shouldn't affect it running 🤔

[Iknewthatwouldhappen]

Thanks for replying Martin. I'm simply starting a new solid.js project using the templates from their official docs (including tailwindcss) - then copying an example from solid-dnd.com and trying to find where to paste it in the app.tsx?

I've also tried pasting into a new solid-dnd.tsx file and then using routes to have it as a seperate test page but the errors mentioned in my previous post show up.

The only example that I can get to work is the one shown on the github main page for solid-dnd, but this doesn't include any code for handling the drag 'n drop, which is the part I need and where the examples are nice.

So really, just looking for where to paste the code from the examples on solid-dnd.com - as straight copy & paste doesn't seem to work.

Thanks & I appreciate the project!

[georgfaust]

I understand that writing docs is no fun, but as a beginner I just can't use this.
Having at least a repo with ready to run examples would help a lot.
Right now, even the example in the readme does not work.

const [, { onDragEnd }] = useDragDropContext();

Uncaught TypeError: useDragDropContext is not a function or its return value is not iterable

[ShivamJoker]

Hi @georgfaust I recently discovered this JS library which has a pretty simple API you can give it a try, I was able to implement my sortable lists.

https://atlassian.design/components/pragmatic-drag-and-drop/about

[georgfaust]

I've created a repo with all the examples from the website.

https://github.com/georgfaust/solid-dnd-examples

I hope this is OK, as the website is not officially under MIT.
I copied the lic from solid-dnd.

@martinpengellyphillips if this is not OK, let me know.

[martinpengellyphillips]

@georgfaust totally fine - thanks for checking!

[martinpengellyphillips]

Maybe I'll add a tutorial with the classic build a chess board example as an step in the right direction.

[Juranamou]

Hello, I am very new to this plugin, but as others are noting, the examples are working out of the box but typescript is throwing many errors, just wanted to get some feedback on this if I am doing something wrong perhaps.

[benbriedis]

I'm guessing that https://docs.dndkit.com is effectively a source of documentation as this library is a port of it.

[martinpengellyphillips]

@benbriedis it's inspired by, but not a port of dnd-kit.

[rmcsharry]

I tried to use this library, but without documentation, I cannot get it to work. Thanks for the hard work, but I have had to give up on it.

I resolved all the Typescript errors. What I noticed is that I could get items to drag only if I hard-coded the id:

createDraggable(1)

But I needed several elements to be draggable, but when I passed eg props.id, then nothing was draggable.

I think that props.id needs to be a signal, but not sure. Since I'm new to Solid also, without docs for this lib I couldn't figure out how to make it work.

It seems others are also struggling, so I'm now going to try and use PragmaticDnD that was linked above. I found an example using Solid: https://github.com/dotnize/pdnd-solid-tailwind