{"id":13447484,"url":"https://github.com/aigan/mv-sorter","last_synced_at":"2026-04-13T02:03:38.003Z","repository":{"id":57305783,"uuid":"175637312","full_name":"aigan/mv-sorter","owner":"aigan","description":"A custom element that makes the content sortable","archived":false,"fork":false,"pushed_at":"2023-11-12T19:41:53.000Z","size":171,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-15T07:18:02.525Z","etag":null,"topics":["animation","component","dnd","drag","drag-and-drop","drag-drop","draggable","dragging","droppable","frontend","javascript","polymer-3","reordering","sort","sortable","sorting","ui","web-component","web-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/aigan.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-03-14T14:23:04.000Z","updated_at":"2024-03-20T07:33:12.000Z","dependencies_parsed_at":"2022-09-03T21:01:16.496Z","dependency_job_id":"77425be8-312e-4b77-bc8d-099903b306d3","html_url":"https://github.com/aigan/mv-sorter","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigan%2Fmv-sorter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigan%2Fmv-sorter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigan%2Fmv-sorter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aigan%2Fmv-sorter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aigan","download_url":"https://codeload.github.com/aigan/mv-sorter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247935519,"owners_count":21020845,"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":["animation","component","dnd","drag","drag-and-drop","drag-drop","draggable","dragging","droppable","frontend","javascript","polymer-3","reordering","sort","sortable","sorting","ui","web-component","web-components"],"created_at":"2024-07-31T05:01:19.038Z","updated_at":"2026-04-13T02:03:32.966Z","avatar_url":"https://github.com/aigan.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Published on NPM](https://img.shields.io/npm/v/mv-sorter.svg)](https://www.npmjs.com/package/mv-sorter)\n\n# \u0026lt;mv-sorter\u0026gt;\n\nDrag and drop for lists as a web component.\n\n## Demo\n\nSee [Demo](https://blog.jonas.liljegren.org/mv-sorter/).\n\n## Features\n\n* Natural movement of items using kinetic momentum\n\n* Performant (using requestAnimationFrame and css translate)\n\n* No dependencies\n\n* Clean and powerful api\n\n* Vertical lists\n\n* Horizontal lists\n\n* Movement between lists\n\n* Supports both mouse and touch interfaces\n\n* Unopinionated styling\n\n* No creation of additional wrapper dom nodes\n\n* Accepts any html elements as draggable\n\n* Allows text selection around and inside items\n\n* Handles elements of different sizes\n\n* Supports drop of element anywhere on page, finding the closest availible drop area\n\n* Handles changing visibility of drop zones\n\n* Optional drag handles\n\n* (almost) supports multiple and nested sortable containers\n\n* Configurable drop zones per container.\n\n* Dispatches events and uses css classes for changing states\n\n* Respects the disabled attribute\n\n* Handles changes in element and page layout during dragging and animations\n\n\n## Usage\n\n### Installation\n\n```\nnpm install --save mv-sorter\n```\n\n### In an html file\n```html\n\u003cscript type=\"module\" src=\"./mv-sorter.js\"\u003e\u003c/script\u003e\n\u003cmv-sorter\u003e\u003cdiv\u003eA\u003c/div\u003e\u003cdiv\u003eB\u003c/div\u003e\u003c/mv-sorter\u003e\n```\n\nSupported attributes are:\n* row: elements are displayes horizontal (default)\n* column: elements are displayed vertical\n* lock: Only move in selected axis\n* group: Allow movement to other containers in the same group\n* autosave: move element in DOM after drop\n* disabled: make container inactive\n\nEvents you can listen to on the `mv-sorter` container:\n* drop: details `{element, item}`\n* dropoutside: details `{element, item}`\n\nMethods availible on the `mv-sorter` container:\n* reset(): move all items back to their original DOM positions\n* commit(): update DOM placing items in their new place\n* elements(): lists elements in the container, similar to what you would get from the DOM after a commit()\n* elements_removed(): list elements moved to another contianer\n* elements_added(): lists elements moved here from another container\n\nThe property `is_altered` tells you if anything has changed, like sort order or anything added or removed.\n\nYou can also add a `mv-draghandle` in an element for using that for dragging, instead of the whole element.\n\n\n## Missing features\n\n* Keyboard and accessability support\n\n* Scroll viewport when items are dragged to edge\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faigan%2Fmv-sorter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faigan%2Fmv-sorter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faigan%2Fmv-sorter/lists"}