{"id":13567771,"url":"https://github.com/lukasoppermann/html5sortable","last_synced_at":"2026-03-17T23:37:53.970Z","repository":{"id":10574044,"uuid":"12780802","full_name":"lukasoppermann/html5sortable","owner":"lukasoppermann","description":"VanillaJS sortable lists and grids using native HTML5 drag and drop API.","archived":false,"fork":false,"pushed_at":"2024-06-10T13:05:52.000Z","size":3681,"stargazers_count":1650,"open_issues_count":46,"forks_count":455,"subscribers_count":32,"default_branch":"master","last_synced_at":"2026-01-30T19:41:15.993Z","etag":null,"topics":["drag","drag-and-drop","javascript","sortable-lists","sortables","vanilla-javascript","vanillajs"],"latest_commit_sha":null,"homepage":"http://lukasoppermann.github.io/html5sortable/index.html","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/lukasoppermann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":["lukasoppermann"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2013-09-12T10:18:20.000Z","updated_at":"2026-01-28T21:12:56.000Z","dependencies_parsed_at":"2024-01-13T20:59:29.828Z","dependency_job_id":"3b3e0d04-e178-4a4e-9f3f-f26ca9909dbe","html_url":"https://github.com/lukasoppermann/html5sortable","commit_stats":{"total_commits":737,"total_committers":87,"mean_commits":8.471264367816092,"dds":0.7679782903663501,"last_synced_commit":"738dfb57a5cbb642c202bbcceeb891c618bd74b0"},"previous_names":["voidberg/html5sortable"],"tags_count":71,"template":false,"template_full_name":null,"purl":"pkg:github/lukasoppermann/html5sortable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fhtml5sortable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fhtml5sortable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fhtml5sortable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fhtml5sortable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lukasoppermann","download_url":"https://codeload.github.com/lukasoppermann/html5sortable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lukasoppermann%2Fhtml5sortable/sbom","scorecard":{"id":604045,"data":{"date":"2025-08-11","repo":{"name":"github.com/lukasoppermann/html5sortable","commit":"f3859acb7b7f29b833badff569a33c4fca95e1f8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.1,"checks":[{"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":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"Code-Review","score":2,"reason":"Found 2/9 approved changesets -- score normalized to 2","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":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/html5sortable.yml:1","Info: no jobLevel write permissions found"],"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":"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":2,"reason":"dependency not pinned by hash detected -- score normalized to 2","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/html5sortable.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/lukasoppermann/html5sortable/html5sortable.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/html5sortable.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/lukasoppermann/html5sortable/html5sortable.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/html5sortable.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/lukasoppermann/html5sortable/html5sortable.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/html5sortable.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/lukasoppermann/html5sortable/html5sortable.yml/master?enable=pin","Warn: npmCommand not pinned by hash: make-release.sh:14","Info:   0 out of   3 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   1 out of   2 npmCommand dependencies pinned"],"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":"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":"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":"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":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 25 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":"36 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"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-21T01:10:30.063Z","repository_id":10574044,"created_at":"2025-08-21T01:10:30.063Z","updated_at":"2025-08-21T01:10:30.063Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30635278,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-17T22:38:22.569Z","status":"ssl_error","status_checked_at":"2026-03-17T22:38:11.804Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","javascript","sortable-lists","sortables","vanilla-javascript","vanillajs"],"created_at":"2024-08-01T13:02:42.551Z","updated_at":"2026-03-17T23:37:53.921Z","avatar_url":"https://github.com/lukasoppermann.png","language":"TypeScript","readme":"![html5sortable1](https://user-images.githubusercontent.com/42062381/90550349-1f023500-e190-11ea-9db0-f6d5ba5412a7.png)\n\n\n## Community maintained\n\n\u003e [!WARNING]\n\u003e A fair **warning:** this repository is currently not being actively developed. It works pretty fine, but if you find any issues you will need to fix them yourself. I try to keep the dependencies up to date and will happily help you fix issues and merge PRs for bugfixes or new features. \n\n\n\u003ch1\u003e HTML5Sortable \u003c/h1\u003e\n\n[![Build Status](https://github.com/lukasoppermann/html5sortable/workflows/Build%20and%20test/badge.svg)](https://github.com/lukasoppermann/html5sortable/actions) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) [![Coverage Status](https://img.shields.io/coveralls/lukasoppermann/html5sortable/master.svg?style=flat-square)](https://coveralls.io/github/lukasoppermann/html5sortable) [![Known Vulnerabilities](https://snyk.io/test/github/lukasoppermann/html5sortable/badge.svg?style=flat-square)](https://snyk.io/test/github/lukasoppermann/html5sortable)  [![NPM](https://img.shields.io/npm/v/html5sortable.svg?style=flat-square)](https://www.npmjs.com/package/html5sortable) [![npm](https://img.shields.io/npm/dt/html5sortable.svg?style=flat-square)](https://www.npmjs.com/package/html5sortable) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](CONTRIBUTING.md) [![Code of Conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](CODE_OF_CONDUCT.md)\n\n\u003e **Lightweight vanillajs micro-library for creating sortable lists and grids using native HTML5 drag and drop API.**\n\n\n\n# Table of Contents\n  * [Community maintained](#community-maintained)\n  * [Looking for Co-Maintainer](#looking-for-co-maintainer)\n  * [Features](#features)\n  * [Framework adapters](#framework-adapters)\n  * [Installation](#installation)\n  * [Examples](#examples)\n  * [Docs](#docs)\n    * [Usage](#usage)\n    * [Styling](#styling)\n    * [Nesting](#nesting)\n    * [Events](#events)\n    * [Options](#options)\n    * [Methods](#methods)\n    * [Sorting table rows](#sorting-table-rows)\n  * [Contributing](#contributing)\n  * [Polyfills](#polyfills-facing-towards-the-future-instead-of-the-past)\n  * [Touch Support](#touch-support)\n  * [Known Issues](#known-issues)\n      \n\n## Looking for Co-Maintainer\n[![Looking for Co-Maintainer](https://img.shields.io/badge/looking%20for-co%E2%80%93maintainer-red.svg?style=flat-square)](https://twitter.com/lukasoppermann)\n\nIf you are interested in actively helping with maintaining \u0026 improving this project please send me a message via twitter [@lukasoppermann](https://twitter.com/lukasoppermann) or email oppermann.lukas@gmail.com with a short text of what you would like to do on the project. This may be something small like sorting issues and helping with questions and small bugs (if you have little time or are not that experienced) or something big like tackling big features.\n\n## Features\n* Only 2KB (minified and gzipped).\n* Built using native HTML5 drag and drop API. No dependencies.\n* Supports both list and grid style layouts.\n* Supported Browsers: Current versions of all major browsers (Chrome, Firefox, Safari, Opera, Edge), [IE11+ (Polyfill required)](#polyfills-facing-towards-the-future-instead-of-the-past)\n* Available as ES6 Module, AMD, CommonJS and iffe with `sortable` global\n\n**Demo:** Check out the **[examples](http://lukasoppermann.github.io/html5sortable/index.html)**\n\n## Framework adapters\nIf you would like to add an adapter to the list, please [create an issue](https://github.com/lukasoppermann/html5sortable/issues) with the link to your adapter.\n- **Polymer:** https://github.com/trofrigo/polymer-html5sortable\n\n## Installation\nWe recommend installing the package via npm.\n\n```\nnpm install html5sortable --save\n```\n\nOnce you install the package using `npm` or [downloading the latest release](https://github.com/lukasoppermann/html5sortable/releases/latest) (don't use the master branch), load file you need **from the `dist/` directory**, e.g. `dist/html.sortable.min.js` for the minified iife version.\n\n- **iffe** (loading file via script tag): `dist/html5sortable.js` or `dist/html5sortable.min.js`\n- **ES6 Module**: `dist/html5sortable.es.js`\n- **CommonJS Module**: `dist/html5sortable.cjs.js`\n- **AMD Module**: `dist/html5sortable.amd.js`\n\nStill using **bower**? `bower install https://github.com/lukasoppermann/html5sortable.git`\n\n## Examples\nYou can find the **[examples online](https://lukasoppermann.github.io/html5sortable/index.html)** or test locally. **Warning:** the online demo is just to show off the features and is most likely not up to date. Please study this readme file for the current way of implementing and using `html5sortable`.\n\n## Docs\n\n\n### Usage\n\nUse `sortable` method to create a sortable list:\n\n``` javascript\nsortable('.sortable');\n```\n\n### Styling\n\nUse `.sortable-placeholder` CSS selectors to change the styles of the placeholder. You may change the class by setting the `placeholderClass` option in the config object.\n\n``` javascript\nsortable('.sortable', {\n  placeholderClass: 'my-placeholder fade'\n});\n```\n\n### Nesting\nYou can nest sortables inside each other. However, take care to add a wrapper around the items, a sortable-item can **not** at the same time be a `sortable`.\n\n```html\n\u003cdiv class=\"list\"\u003e\u003c!-- Sortable --\u003e\n  \u003cdiv class=\"item\"\u003e Item 1\n    \u003cdiv class=\"sublist\"\u003e\u003c!-- Nested Sortable; Wrapping container needed --\u003e\n      \u003cdiv class=\"subitem\"\u003eSubitem 1\u003c/div\u003e\n      \u003cdiv class=\"subitem\"\u003eSubitem 2\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"item\"\u003e Item 2 \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Events\nNOTE: Events can be listened on any element from the group (when using `connectWith`), since the same event will be dispatched on all of them.\n\n### sortstart\n\nUse `sortstart` event if you want to do something when sorting starts:\n\n``` javascript\nsortable('.sortable')[0].addEventListener('sortstart', function(e) {\n    /*\n\n    This event is triggered when the user starts sorting and the DOM position has not yet changed.\n\n    e.detail.item - {HTMLElement} dragged element\n\n    Origin Container Data\n    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only\n    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container\n    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)\n    */\n});\n```\n\n### sortstop\n\nUse the `sortstop` event if you want to do something when sorting stops:\n\n``` javascript\nsortable('.sortable')[0].addEventListener('sortstop', function(e) {\n    /*\n\n    This event is triggered when the user stops sorting and the DOM position has not yet changed.\n\n    e.detail.item - {HTMLElement} dragged element\n\n    Origin Container Data\n    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only\n    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container\n    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)\n    */\n});\n```\n\n### sortupdate\n\nUse `sortupdate` event if you want to do something when the order changes (e.g. storing the new order):\n\n``` javascript\nsortable('.sortable')[0].addEventListener('sortupdate', function(e) {\n\n    console.log(e.detail);\n\n    /*\n    This event is triggered when the user stopped sorting and the DOM position has changed.\n\n    e.detail.item - {HTMLElement} dragged element\n\n    Origin Container Data\n    e.detail.origin.index - {Integer} Index of the element within Sortable Items Only\n    e.detail.origin.elementIndex - {Integer} Index of the element in all elements in the Sortable Container\n    e.detail.origin.container - {HTMLElement} Sortable Container that element was moved out of (or copied from)\n    e.detail.origin.itemsBeforeUpdate - {Array} Sortable Items before the move\n    e.detail.origin.items - {Array} Sortable Items after the move\n\n    Destination Container Data\n    e.detail.destination.index - {Integer} Index of the element within Sortable Items Only\n    e.detail.destination.elementIndex - {Integer} Index of the element in all elements in the Sortable Container\n    e.detail.destination.container - {HTMLElement} Sortable Container that element is moved into (or copied into)\n    e.detail.destination.itemsBeforeUpdate - {Array} Sortable Items before the move\n    e.detail.destination.items - {Array} Sortable Items after the move\n    */\n});\n```\n\n### sortenter \n\nFired when a dragitem enters a sortable container. \n\n### sortleave\n\nFired when a dragitem leaves a sortable container. \n\n\n## Options\n\n### items\nUse the `items` option to specify which items inside the element should be sortable:\n\n``` javascript\nsortable('.sortable', {\n    items: ':not(.disabled)'\n});\n```\n### handle\nUse the `handle` option to restrict drag start to the specified element:\n\n``` javascript\nsortable('.sortable', {\n    handle: 'h2'\n});\n```\n### forcePlaceholderSize\nSetting the `forcePlaceholderSize` option to true, forces the placeholder to have a height:\n\n``` javascript\nsortable('.sortable', {\n    forcePlaceholderSize: true\n});\n```\n\n### connectWith ![deprecated](https://img.shields.io/badge/feature-deprecated-yellow.svg?longCache=true\u0026style=flat-square)\n**Use [`acceptFrom`](#acceptFrom) instead.** The `connectWith` option allows you to create a connected lists:\n\n``` javascript\nsortable('.js-sortable, .js-second-sortable', {\n    connectWith: 'connected' // unique string, which is not used for other connectWith sortables\n});\n```\n\n### acceptFrom\nUse the `acceptFrom` option to restrict which sortable's items will be accepted by this sortable. `acceptFrom` accepts a comma separated list of selectors or `false` to disabling accepting items. This is an alternative to the now **deprecated** [connectWith](#connectwith) and should not be used together.\n\n``` javascript\nsortable('.sortable', {\n  acceptFrom: '.sortable, .anotherSortable' // Defaults to null\n});\n```\n\n***Note:*** Using `acceptFrom` also effects the sortable itself. This means, items will not be sortable within the list itself, if you do not include it in the `acceptFrom` option. \n\nIn the example the current list `.sortable` allows items within it to be sorted and accepts elements from `.anotherSortable`.\n\nIf you want to be able to move items between to sortables, the `acceptFrom` option must be present on both of them.\n\n### placeholder\nUse the `placeholder` option to specify the markup of the placeholder:\n\n``` javascript\nsortable('.sortable', {\n  items: 'tr' ,\n  placeholder: '\u003ctr\u003e\u003ctd colspan=\"7\"\u003e\u0026nbsp;\u003c/td\u003e\u003c/tr\u003e'\n});\n```\n\n### hoverClass\nUse the `hoverClass` option to apply css classes to the hovered element rather than relying on `:hover`. This can eliminate some potential drag and drop issues where another element thinks it is being hovered over. Disabled when disabling or destroying sortable element.\n\n``` javascript\nsortable('.sortable', {\n  hoverClass: 'is-hovered is-hovered-class' // Defaults to false\n});\n```\n\n### dropTargetContainerClass\nUse `dropTargetContainerClass` option to apply a css Class to the container. The class is added when dragged item enters the container and removed when it leaves it (or is dropped).\n\n``` javascript\nsortable('.sortable', {\n  dropTargetContainerClass: 'is-drop-target' // Defaults to false\n});\n```\n\n### maxItems\nUse the `maxItems` option to restrict the number of items that can be added to a sortable from a [connected](#connectwith) sortable. `maxItems` should always be combined with the `items` option. Make sure `items` does not match placeholder and other options, so that they are not counted.\n\n``` javascript\nsortable('.sortable', {\n  maxItems: 3 // Defaults to 0 (no limit)\n});\n```\n### copy\nUse the `copy` option to duplicate the element on drag. The original element will remain in the same position.\n\n``` javascript\nsortable('.sortable', {\n  copy: true // Defaults to false\n});\n```\n\n### orientation\nUse the `orientation` option to specify the orientation of your list and fix incorrect hover behaviour. Defaults to `'vertical'`.\n\n``` javascript\nsortable('.sortable', {\n  orientation: 'horizontal' // Defaults to 'vertical'\n});\n```\n\n### itemSerializer\nYou can provide a `function` that will be applied to every item in the `items` array ([see serialize](#serialize)). The function receives two arguments: `serializedItem: object`, `sortableContainer: Element`. This function can be used to change the output for the items. Defaults to `undefined`.\n\n``` javascript\nsortable('.sortable', {\n  itemSerializer: (serializedItem, sortableContainer) =\u003e {\n    return {\n      position:  serializedItem.index + 1,\n      html: serializedItem.html\n    }\n  }\n});\n```\n\n### containerSerializer\nYou can provide a `function` that will be applied to the `container` object ([see serialize](#serialize)). The function receives one argument: `serializedContainer: object`. This function can be used to change the output for the container. Defaults to `undefined`.\n\n``` javascript\nsortable('.sortable', {\n  containerSerializer: (serializedContainer) =\u003e {\n    return {\n      length: container.itemCount\n    }\n  }\n});\n```\n\n### customDragImage\nYou can provide a function or a selector string as the `customDragImage` property on the options object which will be used to create the item and position of the drag image (the half-transparent item you see when dragging an element).\n\n#### Using a Function\nThe function gets three parameters, the dragged element, an offset object with the offset values for the offset of the item and the `dragstart` event. The function **MUST** return an object with an `element` property with an html element as well as a `posX` and `posY` property with has the x and y offset for the dragImage.\n\n``` javascript\nsortable('.sortable', {\n  customDragImage: (draggedElement, elementOffset, event) =\u003e {\n    return {\n      element: draggedElement,\n      posX: event.pageX - elementOffset.left,\n      posY: event.pageY - elementOffset.top\n    }\n  }\n});\n```\n\n#### Using a Selector\nAlternatively, you can specify a selector string as `customDragImage`. When using a selector, the first element matched by the selector will be used as the drag image. Note that if no elements match the selector, the default drag behavior will be used.\n```javascript\nsortable('.sortable', {\n  customDragImage: '.custom-drag-image-selector'\n});\n```\n\n##### ElementOffset Object Details\nThe elementOffset object provided to the custom drag image function includes the following properties, which represent the position of the element relative to the viewport, adjusted for any scrolling:\n```javascript\n{\n  left: rect.left + window.scrollX,\n  right: rect.right + window.scrollX,\n  top: rect.top + window.scrollY,\n  bottom: rect.bottom + window.scrollY\n}\n```\n\n## Methods\n\n### destroy\nTo remove the sortable functionality completely:\n\n``` javascript\nsortable('.sortable', 'destroy');\n```\n\n### disable\nTo disable the sortable temporarily:\n\n``` javascript\nsortable('.sortable', 'disable');\n```\n\n### enable\nTo enable a disabled sortable:\n\n``` javascript\nsortable('.sortable', 'enable');\n```\n\n### serialize\nYou can easily serialize a sortable using the `serialize` command. If you provided an [`itemSerializer`](#itemSerializer) or [`containerSerializer`](#containerSerializer) function in the options object, they will be applied to the `container` object and the `items` objects before they are returned.\n\n``` javascript\nsortable('.sortable', 'serialize');\n\n// You will receive an object in the following format\n[{\n  container: {\n    node: sortableContainer,\n    itemCount: items.length\n  }\n  items: [{\n    parent: sortableContainer,\n    node: item,\n    html: item.outerHTML,\n    index: index(item, items)\n  }, …]\n}, …]\n```\n\n### reload\nWhen you add a new item to a sortable, it will not automatically be a draggable item, so you will need to reinit the sortable. Your previously added options will be preserved.\n\n``` javascript\nsortable('.sortable');\n```\n\n## Sorting table rows\n\n * Initialize plugin on `tbody` element (browsers automatically add `tbody` if you don't)\n * Keep in mind that different browsers may display different drag images of the row during the drag action. Webkit browsers seem to hide entire contents of `td` cell if there are any inline elements inside the `td`. This may or may not be fixed by setting the `td` to be `position: relative;`\n * If you add a custom `placeholder` you must use a `tr` e.g. `placeholder: \"\u003ctr\u003e\u003ctd colspan=\"3\"\u003eThe row will appear here\u003c/td\u003e\u003c/tr\u003e\"`, otherwise you will only be able to drop items when hovering the first column.\n\n## Contributing\nThis version is maintained by [Lukas Oppermann](https://github.com/lukasoppermann) and [many other contributors](../../contributors). Thanks for your help! :+1:\n\nContributions are always welcome. Please check out the [contribution guidelines](CONTRIBUTING.md) to make it fast \u0026 easy for us to merge your PR.\n\n**Issues:** If you create a [bug report](https://github.com/lukasoppermann/html5sortable/issues/new/choose), please make sure to include a [test case](https://codepen.io/pen/?template=GRoQRxo) showing the issue. The easiest way is to copy the [codepen template](https://codepen.io/pen/?template=GRoQRxo).\n\n## Polyfills: Facing towards the future instead of the past\nThis project is focusing on modern, evergreen browsers to deliver a fast and small package. While many projects try build features so that it runs in the oldest browser (looking at you IE9), we try to create a fast and pleasant development experience using the language capabilities that the current version of Javascript offers.\n\n### Benefits\n#### Small and fast package for modern browsers\nWhile a backwards facing approach penalises modern browsers by making them download huge files, we prefer to ship a small package and have outdated browser bear the penalty of the polyfill. An additional benefit is that you might polyfill those features in any case so you don't have any additional load.\n\n#### Contribution friendly code base\nWe try to encourage people to help shape the future of this package and contribute in small or big ways. By removing hard to understand hacks we make it easier for people new to the code base or even Javascript to contribute.\n\n#### Helps browser optimisation\nBrowser try to performance optimise language features as much as possible. Working around the language to make code work in outdated browser may actually work against this.\n\n### Polyfill\nWe recommend using the [Financial Times Polyfill Service](https://github.com/Financial-Times/polyfill-service) which will polyfill only the necessary features for browsers that need a polyfill. It is basically a no-config, easy solution.\n```\n\u003cscript src=\"https://cdn.polyfill.io/v2/polyfill.min.js\"\u003e\u003c/script\u003e\n```\n\n### Touch Support\nTouch support can be achieved by using the [DragDropTouch](https://github.com/Bernardo-Castilho/dragdroptouch) polyfill.\nThe DragDropTouch polyfill must be included before html5sortable is initialized.\n\n## Known Issues\n### Firefox\n- **Dragstart not working on buttons**  \nDragstart event does not fire on `button` elements. This effectively disables drag and drop for button elements. See https://caniuse.com/#feat=dragndrop in the known issues section.\n- **Drag \u0026 Drop is not working on iOS**  \nBut works in conjunction with [DragDropTouch](https://github.com/Bernardo-Castilho/dragdroptouch) [#522](https://github.com/lukasoppermann/html5sortable/issues/522).\n","funding_links":["https://github.com/sponsors/lukasoppermann"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasoppermann%2Fhtml5sortable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flukasoppermann%2Fhtml5sortable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flukasoppermann%2Fhtml5sortable/lists"}