{"id":20075018,"url":"https://github.com/sortablejs/react-mixin-sortablejs","last_synced_at":"2025-08-07T18:04:40.775Z","repository":{"id":57155925,"uuid":"62585468","full_name":"SortableJS/react-mixin-sortablejs","owner":"SortableJS","description":"React mixin for SortableJS.","archived":false,"fork":false,"pushed_at":"2016-10-26T10:35:51.000Z","size":4,"stargazers_count":27,"open_issues_count":2,"forks_count":8,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-04-23T22:09:37.819Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SortableJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-04T20:06:38.000Z","updated_at":"2022-03-02T13:55:26.000Z","dependencies_parsed_at":"2022-08-30T06:50:17.430Z","dependency_job_id":null,"html_url":"https://github.com/SortableJS/react-mixin-sortablejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SortableJS%2Freact-mixin-sortablejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SortableJS%2Freact-mixin-sortablejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SortableJS%2Freact-mixin-sortablejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SortableJS%2Freact-mixin-sortablejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SortableJS","download_url":"https://codeload.github.com/SortableJS/react-mixin-sortablejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241506939,"owners_count":19973714,"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":[],"created_at":"2024-11-13T14:57:15.853Z","updated_at":"2025-03-02T12:29:37.989Z","avatar_url":"https://github.com/SortableJS.png","language":null,"readme":"# THIS PROJECT NEEDS A MAINTAINER.\n\n---\n\nreact-mixin-sortablejs\n-------------------\nReact mixin for [SortableJS](https://github.com/RubaXa/Sortable/).\n\nDemo: http://rubaxa.github.io/Sortable/\n\n\n\u003ca name=\"react\"\u003e\u003c/a\u003e\n### Support React\nInclude [react-sortable-mixin.js](react-sortable-mixin.js).\nSee [more options](react-sortable-mixin.js#L26).\n\n```jsx\nvar SortableList = React.createClass({\n\tmixins: [SortableMixin],\n\n\tgetInitialState: function() {\n\t\treturn {\n\t\t\titems: ['Mixin', 'Sortable']\n\t\t};\n\t},\n\n\thandleSort: function (/** Event */evt) { /*..*/ },\n\n\trender: function() {\n\t\treturn \u003cul\u003e{\n\t\t\tthis.state.items.map(function (text, i) {\n\t\t\t\treturn \u003cli ref={i}\u003e{text}\u003c/li\u003e\n\t\t\t})\n\t\t}\u003c/ul\u003e\n\t}\n});\n\nReactDOM.render(\u003cSortableList /\u003e, document.body);\n\n\n//\n// Groups\n//\nvar AllUsers = React.createClass({\n\tmixins: [SortableMixin],\n\n\tsortableOptions: {\n\t\tref: \"user\",\n\t\tgroup: \"shared\",\n\t\tmodel: \"users\"\n\t},\n\n\tgetInitialState: function() {\n\t\treturn { users: ['Abbi', 'Adela', 'Bud', 'Cate', 'Davis', 'Eric'] };\n\t},\n\n\trender: function() {\n\t\treturn (\u003cdiv\u003e\n\t\t\t\t\u003ch1\u003eUsers\u003c/h1\u003e\n\t\t\t\t\u003cul ref=\"user\"\u003e{\n\t\t\t\t\tthis.state.users.map(function (text, i) {\n\t\t\t\t\t\treturn \u003cli ref={i}\u003e{text}\u003c/li\u003e\n\t\t\t\t\t})\n\t\t\t\t}\u003c/ul\u003e\n\t\t\t\u003c/div\u003e\n\t\t);\n\t}\n});\n\nvar ApprovedUsers = React.createClass({\n\tmixins: [SortableMixin],\n\tsortableOptions: { group: \"shared\" },\n\n\tgetInitialState: function() {\n\t\treturn { items: ['Hal', 'Judy'] };\n\t},\n\n\trender: function() {\n\t\treturn \u003cul\u003e{\n\t\t\tthis.state.items.map(function (text, i) {\n\t\t\t\treturn \u003cli ref={i}\u003e{text}\u003c/li\u003e\n\t\t\t})\n\t\t}\u003c/ul\u003e\n\t}\n});\n\nReactDOM.render(\u003cdiv\u003e\n\t\u003cAllUsers/\u003e\n\t\u003chr/\u003e\n\t\u003cApprovedUsers/\u003e\n\u003c/div\u003e, document.body);\n```\n\n### Support React ES2015 / TypeScript syntax\nAs mixins are not supported in ES2015 / TypeScript syntax here is example of ES2015 ref based implementation.\nUsing refs is the preferred (by facebook) \"escape hatch\" to underlaying DOM nodes: [React: The ref Callback Attribute](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute)\n\n```js\nimport * as React from \"react\";\nimport Sortable from 'sortablejs';\n\nexport class SortableExampleEsnext extends React.Component {\n\n  sortableContainersDecorator = (componentBackingInstance) =\u003e {\n    // check if backing instance not null\n    if (componentBackingInstance) {\n      let options = {\n        handle: \".group-title\" // Restricts sort start click/touch to the specified element\n      };\n      Sortable.create(componentBackingInstance, options);\n    }\n  };\n\n  sortableGroupDecorator = (componentBackingInstance) =\u003e {\n    // check if backing instance not null\n    if (componentBackingInstance) {\n      let options = {\n        draggable: \"div\", // Specifies which items inside the element should be sortable\n        group: \"shared\"\n      };\n      Sortable.create(componentBackingInstance, options);\n    }\n  };\n\n  render() {\n    return (\n      \u003cdiv className=\"container\" ref={this.sortableContainersDecorator}\u003e\n        \u003cdiv className=\"group\"\u003e\n          \u003ch2 className=\"group-title\"\u003eGroup 1\u003c/h2\u003e\n          \u003cdiv className=\"group-list\" ref={this.sortableGroupDecorator}\u003e\n            \u003cdiv\u003eSwap them around\u003c/div\u003e\n            \u003cdiv\u003eSwap us around\u003c/div\u003e\n            \u003cdiv\u003eSwap things around\u003c/div\u003e\n            \u003cdiv\u003eSwap everything around\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv className=\"group\"\u003e\n          \u003ch2 className=\"group-title\"\u003eGroup 2\u003c/h2\u003e\n          \u003cdiv className=\"group-list\" ref={this.sortableGroupDecorator}\u003e\n            \u003cdiv\u003eSwap them around\u003c/div\u003e\n            \u003cdiv\u003eSwap us around\u003c/div\u003e\n            \u003cdiv\u003eSwap things around\u003c/div\u003e\n            \u003cdiv\u003eSwap everything around\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsortablejs%2Freact-mixin-sortablejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsortablejs%2Freact-mixin-sortablejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsortablejs%2Freact-mixin-sortablejs/lists"}