{"id":31940249,"url":"https://github.com/thisbeyond/solid-dnd","last_synced_at":"2025-10-14T08:52:56.795Z","repository":{"id":37394491,"uuid":"376040327","full_name":"thisbeyond/solid-dnd","owner":"thisbeyond","description":"A lightweight, performant, extensible drag and drop toolkit for Solid JS.","archived":false,"fork":false,"pushed_at":"2024-07-01T13:44:28.000Z","size":2614,"stargazers_count":567,"open_issues_count":41,"forks_count":43,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-09-13T18:49:13.809Z","etag":null,"topics":["drag","drag-and-drop","drop","solidjs"],"latest_commit_sha":null,"homepage":"https://solid-dnd.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thisbeyond.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-11T13:51:02.000Z","updated_at":"2025-09-08T12:31:46.000Z","dependencies_parsed_at":"2024-06-18T16:56:33.814Z","dependency_job_id":"24d232a0-8143-47ef-8eee-58063c5e7a41","html_url":"https://github.com/thisbeyond/solid-dnd","commit_stats":{"total_commits":180,"total_committers":7,"mean_commits":"25.714285714285715","dds":"0.10555555555555551","last_synced_commit":"1060f8d3bb29e967fff1f62d3b8de4f8ea882e76"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":"solidjs-community/solid-lib-starter","purl":"pkg:github/thisbeyond/solid-dnd","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thisbeyond%2Fsolid-dnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thisbeyond%2Fsolid-dnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thisbeyond%2Fsolid-dnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thisbeyond%2Fsolid-dnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thisbeyond","download_url":"https://codeload.github.com/thisbeyond/solid-dnd/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thisbeyond%2Fsolid-dnd/sbom","scorecard":{"id":881621,"data":{"date":"2025-08-11","repo":{"name":"github.com/thisbeyond/solid-dnd","commit":"809014fa9ea058ab3cf54ad9d855970b7fd866ab"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.1,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":1,"reason":"Found 4/24 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 10 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"16 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-3qxh-p7jc-5xh6","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-cchq-frgv-rjh5","Warn: Project is vulnerable to: GHSA-g644-9gfx-q4q4"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T08:25:29.093Z","repository_id":37394491,"created_at":"2025-08-24T08:25:29.093Z","updated_at":"2025-08-24T08:25:29.093Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018312,"owners_count":26086348,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag","drag-and-drop","drop","solidjs"],"created_at":"2025-10-14T08:52:43.235Z","updated_at":"2025-10-14T08:52:56.786Z","avatar_url":"https://github.com/thisbeyond.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://solid-dnd.com\"\u003e\n    \u003cimg\n      alt=\"Solid DnD - A lightweight drag and drop toolkit for Solid.\"\n      src=\"./resources/solid-dnd-website-preview.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n- **Built for [Solid](https://solidjs.com/):** leverages fine-grained reactivity primitives for\n  coordination.\n- **Flexible:** built to support a wide range of cases, from plain drag and drop\n  to sortable lists, multiple containers and beyond.\n- **Extendable:** build your own sensors, collision detection algorithms and\n  presets like sortable lists out of the primitives.\n- **Zero dependencies:** Just pair with Solid and good to go.\n- **Performant:** No component re-rendering, coupled with CSS transforms and\n  transitions for silky smooth performance.\n\n![solid drag and drop preview](./resources/solid-dnd-preview-small.gif?raw=true)\n\n## How do I get started? 🧭\n\nInstall it:\n\n```bash\nnpm install @thisbeyond/solid-dnd\n```\n\nUse it:\n\n```jsx\nimport {\n  DragDropProvider,\n  DragDropSensors,\n  useDragDropContext,\n  createDraggable,\n  createDroppable,\n} from \"@thisbeyond/solid-dnd\";\n\nconst Draggable = (props) =\u003e {\n  const draggable = createDraggable(props.id);\n  return \u003cdiv use:draggable\u003edraggable\u003c/div\u003e;\n};\n\nconst Droppable = (props) =\u003e {\n  const droppable = createDroppable(props.id);\n  return \u003cdiv use:droppable\u003edroppable\u003c/div\u003e;\n};\n\nconst Sandbox = () =\u003e {\n  const [, { onDragEnd }] = useDragDropContext();\n\n  onDragEnd(({draggable, droppable}) =\u003e {\n    if (droppable) {\n      // Handle the drop. Note that solid-dnd doesn't move a draggable into a\n      // droppable on drop. It leaves it up to you how you want to handle the\n      // drop.\n    }\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cDraggable id=\"draggable-1\" /\u003e\n      \u003cDroppable id=\"droppable-1\" /\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst App = () =\u003e {\n  return (\n    \u003cDragDropProvider\u003e\n      \u003cDragDropSensors\u003e\n        \u003cSandbox /\u003e\n      \u003c/DragDropSensors\u003e\n    \u003c/DragDropProvider\u003e\n  );\n};\n\nexport default App;\n```\n\nSee more examples at https://solid-dnd.com\n\n## What's implemented? ✔️\n\n- [x] Use `createDraggable` with your elements to easily integrate drag\n      behaviour. Maintain full control over how your element looks and behaves.\n- [x] Manage droppable areas with `createDroppable`. Conditionally enable and\n      disable droppable areas based on the current context.\n- [x] Use `DragOverlay` when you want to drag a representation of your element\n      that is removed from the normal flow.\n- [x] Support for different sensors to detect and manage dragging (pointer\n      sensor provided by default).\n- [x] Layout collision detection algorithms (`mostIntersecting`,\n      `closestCorners` and `closestCenter`) for common usage. You can also add\n      your own.\n- [x] Sortable list primitives for drag and drop list reordering (currently only\n      vertical sorting supported).\n- [x] Use multiple (or nested) `DragDropProvider` for containers isolated from\n      each other.\n\n## Who made this? ✍\n\n[Martin Pengelly-Phillips](https://twitter.com/thesociablenet)\n\n## Why did you make it?\n\n[Solid](https://solidjs.com) first caught my eye when I was looking for a way to\nimprove performance of a [React](https://reactjs.org) app I'd been working on. I\nwas feeling frustrated by the rules of hooks and the effort / complexity of\nperformance improvements - especially what felt like a lot of manual\nbook-keeping across renders. In the end, I changed my app behaviour to sidestep\nthe issues and carried on with React.\n\nBut I also found myself watching Solid's progress too, commenting a bit here and\nthere in the community. So, when I started a new side project I decided to jump\nin and give Solid a go. Performance was great, but what kept me invested in\nSolid was the clean lines of its primitives / API and the incredibly helpful\ncommunity. It felt quick to be productive, and I liked how there seemed to be a\nfocus on real world problems and getting it done (progress over perfection or\neven a hacker spirit). Somehow it also felt closer to vanilla JS and that I was\nworking more with the language than against it.\n\nHowever, there are always tradeoffs. In this case it was that Solid was not\nparticularly well known and there was not an ecosystem of libraries available to\nsolve common problems. This was a double-edged sword. On the one hand I liked\nhow writing solutions myself kept my app lean, and my solutions focused. On the\nother, I was spending time building these solutions rather than my app.\n\nOne of the more challenging ones was adding drag and drop sorting of list items\nto my app. I could have hacked in a third-party library, but I didn't want to\ngive up the granular reactivity of Solid to do so. I was also interested in the\nchallenge - how hard would it be with Solid? Inspired by\n[dnd-kit](https://dndkit.com) (a modern approach to dnd in React), I built\nsomething out for my app in around ~700 lines. I shared a gif of it with the\ncommunity and decided to try to extract it into a library for others. And so,\n`solid-dnd` came to be :)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthisbeyond%2Fsolid-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthisbeyond%2Fsolid-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthisbeyond%2Fsolid-dnd/lists"}