{"id":19903898,"url":"https://github.com/zerotohero-dev/slytherin","last_synced_at":"2025-06-10T19:34:53.184Z","repository":{"id":57363612,"uuid":"116199611","full_name":"zerotohero-dev/slytherin","owner":"zerotohero-dev","description":"Slides and stuff.","archived":false,"fork":false,"pushed_at":"2018-02-12T19:13:12.000Z","size":443,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-26T16:06:11.715Z","etag":null,"topics":["demo","drag","education","framework-agnostic","javascript","lightweight","screencast","slytherin","tutorials","vidcast"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zerotohero-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-04T01:28:52.000Z","updated_at":"2023-10-03T05:27:06.000Z","dependencies_parsed_at":"2022-09-16T07:41:19.538Z","dependency_job_id":null,"html_url":"https://github.com/zerotohero-dev/slytherin","commit_stats":null,"previous_names":["jsbites/slytherin"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fslytherin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fslytherin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fslytherin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zerotohero-dev%2Fslytherin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zerotohero-dev","download_url":"https://codeload.github.com/zerotohero-dev/slytherin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241331130,"owners_count":19945302,"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","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":["demo","drag","education","framework-agnostic","javascript","lightweight","screencast","slytherin","tutorials","vidcast"],"created_at":"2024-11-12T20:25:52.590Z","updated_at":"2025-03-01T07:22:21.606Z","avatar_url":"https://github.com/zerotohero-dev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![tests][tests]][tests-url]\n[![deploy][deploy]][deploy-url]\n[![npm][npm]][npm-url]\n[![license][license]][license-url]\n\n```text\n   _    _\n,-(|)--(|)-.\n\\_   ..   _/ Slytherin: Framework-independent slithering utility.\n  \\______/              Makes things draggable.\n    V  V\n```\n\n[tests]: https://img.shields.io/travis/jsbites/slytherin.svg\n[tests-url]: https://travis-ci.org/jsbites/slytherin\n[npm-url]: https://www.npmjs.com/package/slytherin\n[npm]: https://img.shields.io/npm/v/slytherin.svg\n[deploy]: https://img.shields.io/github/last-commit/jsbites/slytherin.svg?label=last%20deployed\n[deploy-url]: https://github.com/jsbites/slytherin/\n[license]: https://img.shields.io/npm/l/slytherin.svg\n[license-url]: https://www.npmjs.com/package/slytherin\n\n## Demo\n\n[Visit **bytesized.tv/slytherin** for a quick demo](https://bytesized.tv/slytherin).\n\n## Why?\n\n`slytherin` is a drag helper: It makes **DOM** nodes draggable.\n\nYes, there are many great drag\u0026drop libraries out there; so why a new one?\nWell, I created this library mostly for educational purposes. — There will\nbe a screencast about it soon in [**ByteSized.TV**](https://bytesized.tv).\n\nMy goal was to show that creating a drag utility is not that hard, and can\nbe done under, say, fifty lines of code.\n\nIn addition, I wanted something “very” lightweight for my personal use\n(_in [JediFocus](https://jedifocus.com/)_). So `slytherin` is also here to\nscratch my own itch **:)**\n\nIn the end, it does what it says is does: Nothing more, nothing less.\n\n## Installation\n\n`yarn add slytherin`\n\nor\n\n`npm install slytherin`\n\n## Usage Example\n\nFor additional examples with comments and documentation\n[see the `examples` folder](examples).\n\nThe following shows a simple **React** component that uses `slytherin` to\nmake a part of it **draggable**.\n\n\u003e **Aside**\n\u003e\n\u003e Slytherin provides **framework-agnostic** `init`, `start`, and `stop` endpoints,\n\u003e so you don’t have to use it with **React** — You can practically use it with\n\u003e any front-end framework of your liking.\n\n```javascript\nimport { start, stop, init } from 'slytherin';\n\nimport React, { Component } from 'react';\nimport { render } from 'react-dom';\n\nclass SimpleApp extends Component {\n  constructor(props) {\n    super(props);\n  }\n\n  componentDidMount() {\n    // Start listening to drag events.\n    start();\n\n    const box = document.querySelector('.box');\n\n    if (!box) {\n      return;\n    }\n\n    // `init` gives the box super powers:\n    // makes it draggable.\n    init(box, {\n      dragClassName: 'box--shadow',\n      dragHandleClassName: 'box__header'\n    });\n  }\n\n  componentWillUnmount() {\n    // The component is doing a harakiri:\n    // Stop listening to drag events.\n    stop();\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"wrapper\"\u003e\n        \u003cdiv className=\"box\"\u003e\n          \u003cdiv className=\"box__header\"\u003eA Draggable Box\u003c/div\u003e\n          \u003cdiv className=\"box__body\"\u003e\n            \u003cp\u003eRepello Inimicum!\u003c/p\u003e\n            \u003cp\u003eSalvio Hexia!\u003c/p\u003e\n            \u003cp\u003eRepello Muggletum!\u003c/p\u003e\n            \u003cp\u003eProtego Maxima!\u003c/p\u003e\n            \u003cp\u003eFianto Duri!\u003c/p\u003e\n            \u003cp\u003eRepello Inimicum!\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nconst reactRoot = document.getElementById('react-root');\n\nif (reactRoot) {\n  render(\u003cSimpleApp /\u003e, reactRoot);\n}\n```\n\n## Yarn Scripts\n\n* `yarn run lint`: Lints the project\n* `yarn test`: For now, same as `yarn run lint`.\n* `yarn serve-examples`: Creates a simple `http` server to serve the examples.\n* `yarn run watch-examples`: Creates the bundles required for the examples to\n  run. Starts webpack in watch mode.\n\n## Wanna Help?\n\nAny help is more than appreciated.\n\nIf you want to contribute to the source code, **fork this repository** and\n**create a pull request**.\n\n\u003e In lieu of a formal style guide, take care to maintain the existing coding style.\n\nAlso, don’t forget to add unit tests for any new or changed functionality.\n\nIf you want to report a bug; or share a comment or suggestion, [file an issue](https://github.com/jsbites/bytesized.tv.web/issues/new).\n\n## I’ve Found a Bug; I Have an Idea\n\n[For bug reports and suggestions, please file an issue](https://github.com/jsbites/bytesized.tv.web/issues/new).\n\n## Contact Information\n\n* **Project Maintainer**: [Volkan Özçelik](https://volkan.io/)\n* **Project Website**: [bytesized.tv](https://bytesized.tv/)\n\n## License\n\nMIT-licensed. — [See the license file for details](LICENSE.md).\n\n## Code of Conduct\n\nWe are committed to making participation in this project a harassment-free experience\nfor everyone, regardless of the level of experience, gender, gender identity and\nexpression, sexual orientation, disability, personal appearance, body size, race,\nethnicity, age, religion, or nationality.\n\n[See the code of conduct for details](CODE_OF_CONDUCT.md).\n\n## A [ByteSized.TV][vidcast] Project\n\nThis repository is a part of the [Byte-Sized JavaScript VideoCasts][vidcast].\n\nIt is a compilation of short (_around ten minutes_) screencasts about **JavaScript**\nand related technologies.\n\n[**Learn**, **explore**, and **have fun**][vidcast]!\n\n[vidcast]: https://bytesized.tv/ \"ByteSized.TV\"\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerotohero-dev%2Fslytherin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzerotohero-dev%2Fslytherin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzerotohero-dev%2Fslytherin/lists"}