{"id":16132929,"url":"https://github.com/mfuu/sortable-dnd","last_synced_at":"2025-03-18T15:30:41.124Z","repository":{"id":52084844,"uuid":"481602190","full_name":"mfuu/sortable-dnd","owner":"mfuu","description":"JS library for drag-and-drop lists, supports sortable and draggable","archived":false,"fork":false,"pushed_at":"2023-12-18T14:05:28.000Z","size":647,"stargazers_count":17,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2023-12-19T13:00:47.493Z","etag":null,"topics":["drag","drag-and-drop","draggable","drop","sort","sortable"],"latest_commit_sha":null,"homepage":"https://mfuu.github.io/sortable-dnd/","language":"JavaScript","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/mfuu.png","metadata":{"files":{"readme":"README.md","changelog":null,"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}},"created_at":"2022-04-14T12:48:56.000Z","updated_at":"2024-03-11T11:20:13.328Z","dependencies_parsed_at":"2023-12-20T16:16:02.247Z","dependency_job_id":null,"html_url":"https://github.com/mfuu/sortable-dnd","commit_stats":{"total_commits":147,"total_committers":3,"mean_commits":49.0,"dds":"0.17006802721088432","last_synced_commit":"41574e5422bddea814095becfd7476855a66ae78"},"previous_names":[],"tags_count":52,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsortable-dnd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsortable-dnd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsortable-dnd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mfuu%2Fsortable-dnd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mfuu","download_url":"https://codeload.github.com/mfuu/sortable-dnd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243933438,"owners_count":20370986,"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":["drag","drag-and-drop","draggable","drop","sort","sortable"],"created_at":"2024-10-09T22:35:16.563Z","updated_at":"2025-03-18T15:30:40.853Z","avatar_url":"https://github.com/mfuu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sortable-dnd\n\n[![npm](https://img.shields.io/npm/v/sortable-dnd.svg)](https://www.npmjs.com/package/sortable-dnd) [![npm](https://img.shields.io/npm/dm/sortable-dnd.svg)](https://npm-stat.com/charts.html?package=sortable-dnd) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg)](LICENSE)\n\nA JS Library for Drag and Drop, supports Sortable and Draggable\n\n### [Live Demo](https://mfuu.github.io/sortable-dnd/)\n\n## Usage\n\n**Install**\n\n```node\nnpm install sortable-dnd\n```\n\n**HTML**\n\n```html\n\u003cul id=\"group\"\u003e\n  \u003cli class=\"item\"\u003e\n    \u003ci id=\"handle\" class=\"handle\"\u003ehandle\u003c/i\u003e\n    \u003cp\u003e1\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli class=\"item\"\u003e\n    \u003ci id=\"handle\" class=\"handle\"\u003ehandle\u003c/i\u003e\n    \u003cp\u003e2\u003c/p\u003e\n  \u003c/li\u003e\n  \u003cli class=\"item\"\u003e\n    \u003ci id=\"handle\" class=\"handle\"\u003ehandle\u003c/i\u003e\n    \u003cp\u003e3\u003c/p\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n```\n\n**JavaScript**\n\n```js\nimport Sortable from 'sortable-dnd';\n\nlet sortable = new Sortable(document.getElementById('group'), {\n  // draggable: 'li', // use tagName\n  // draggable: '#item', // use id\n  draggable: '.item', // use class\n  // handle: 'I', // use tagName\n  // handle: '#handle', // use id\n  // handle: (e) =\u003e e.target.tagName === 'I' ? true : false, // use function\n  handle: '.handle', // use class\n});\n```\n\n## Options\n\n```js\nnew Sortable(element, {\n  draggable: '', // Specifies which items inside the element should be draggable\n  handle: '', // Drag handle selector within list items\n  group: '', // see @Group\n  lockAxis: '', // Axis on which dragging will be locked\n  multiple: false, // Enable multiple drag\n  selectHandle: '', // Handle selector within list items which used to select element in `multiple: true`\n\n  easing: '', // Easing for animation\n  animation: 150, // Animation speed moving items when sorting\n  chosenClass: '', // Class name for the chosen item\n  selectedClass: '', // The class of the element when it is selected, it is usually used when multiple drag\n  placeholderClass: '', // Class name for the drop placeholder\n  ghostStyle: {}, // The style of the mask element when dragging\n  ghostClass: '', // The class of the mask element when dragging\n\n  sortable: true, // Whether the current list can be sorted by dragging.\n  disabled: false, // Disables the sortable if set to true\n  autoScroll: true, // Automatic scrolling when moving to the edge of the container\n  scrollThreshold: 55, // Threshold to trigger autoscroll\n  scrollSpeed: { x: 10, y: 10 }, // Vertical\u0026Horizontal scrolling speed (px)\n  delay: 0, // Time in milliseconds to define when the sorting should start\n  delayOnTouchOnly: false, // Only delay if user is using touch\n  touchStartThreshold: 1, // How many *pixels* the point should move before cancelling a delayed drag event.\n  emptyInsertThreshold: -1, // Distance mouse must be from empty sortable to insert drag element into it.\n  fallbackOnBody: false, // Appends the ghost element into the document's body\n  store: null, // store data\n  direction: '', // Direction of Sortable, will be detected automatically if not given.\n  swapOnDrop: true, // When the value is false, the dragged element will return to the starting position of the drag\n  removeCloneOnDrop: true, // Whether to remove the cloneEl after the drag is complete.\n\n  customGhost: (nodes) =\u003e {\n    // Customize the ghost element in drag\n    // you must return an HTMLElement\n  },\n\n  // Element is chosen\n  onChoose: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Element is unchosen\n  onUnchoose: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Element dragging started\n  onDrag: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Move an item in the list or between lists\n  onMove: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Element dragging is completed\n  onDrop: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Element is dropped into the current list from another\n  onAdd: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Element is removed from the current list into another\n  onRemove: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Dragging element changes position in the current list\n  onChange: (event) =\u003e {\n    // see @SortableEvent\n  },\n\n  // Element is selected\n  onSelect: (event) =\u003e {\n    // see @SelectEvent\n  },\n\n  // Element is unselected\n  onDeselect: (event) =\u003e {\n    // see @SelectEvent\n  },\n});\n```\n\n**Group**\n\n```js\n// string\ngroup: 'name',\n\n// object\ngroup: {\n  name: 'group', // group name\n\n  // whether elements can be added from other lists,\n  // or an array of group names from which elements can be taken.\n  put: true | false | ['group1', 'group2'],\n\n  // whether elements can be moved out of this list.\n  pull: true | false | 'clone',\n\n  // revert drag element to initial position after moving to a another list.\n  revertDrag: true | false,\n}\n```\n\n**SortableEvent**\n\n```js\nevent.from; // previous list\nevent.to; // list of currently placed drag element\nevent.node; // dragged element\nevent.nodes; // dragged elements\nevent.clone; // cloned element, all dnd operations are based on cloned element and do not alter the source dom(node).\nevent.clones; // cloned elements, there is a value only in the `pull: clone` after moving to a another list.\nevent.target; // drop element\nevent.oldIndex; // old index within parent. `-1`: element added from another list to the current list\nevent.newIndex; // new index within parent. `-1`: element has been removed from the current list\nevent.event; // TouchEvent | MouseEvent\nevent.pullMode; // Pull mode if dragging into another sortable.\nevent.relative; // Position of the drop element relative to the drag element after swap is complete.\nevent.revertDrag; // revert draged element to initial position after moving to a another list in `pull: 'clone'` \u0026 `revertDrag: true`.\nevent.backToOrigin; // dragged element go back to the original list in `pull: 'clone'`.\n```\n\n**SelectEvent**\n\n```js\nevent.event; // TouchEvent | MouseEvent\nevent.index; // index within parent\nevent.node; // dragged element\nevent.from; // list container\n```\n\n## Methods\n\n```js\nlet sortable = new Sortable(el);\n\n// Manually clear all the state of the component, using this method the component will not be draggable\nsortable.destroy();\n\n// Get or set the option value, depending on whether the `value` is passed in\nsortable.option(key, value?);\n\n// Selects the provided multi-drag item\nsortable.select(element);\n\n// Deselects the provided multi-drag item\nsortable.deselect(element);\n\n// Get the selected elements in the list, the return value is available in the case of `multiple`\nsortable.getSelectedElements();\n```\n\n## Static Methods \u0026 Properties\n\n```ts\nimport Sortable from 'sortable-dnd';\n\nSortable.create(el: HTMLElement, options: SortableOptions); // Create new instance\n\nSortable.get(el: HTMLElement); // Get the Sortable instance of an element\n\nSortable.dragged; // The element being dragged\n\nSortable.clone; // The clone element\n\nSortable.ghost; // The ghost element\n\nSortable.active; // Active Sortable instance\n```\n\n**Utils**\n\n```ts\nimport Sortable from 'sortable-dnd';\nconst { on, off, css, index, closest, getRect, toggleClass } = Sortable.utils;\n\n// attach an event handler function\non(el: HTMLElement, event: String, fn: Function);\n\n// remove an event handler\noff(el: HTMLElement, event: String, fn: Function);\n\n// set one CSS properties\ncss(el: HTMLElement, prop: String, value: String);\n\n// Returns the index of an element within its parent for a selected set of elements\nindex(el: HTMLElement, selector: String);\n\n// For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.\nclosest(el: HTMLElement, selector: String, context: HTMLElement, includeContext: Boolean);\n\n// Returns the \"bounding client rect\" of given element\ngetRect(element: HTMLElement, relativeToContainingBlock: boolean, container: HTMLElement);\n\n// Add or remove one classes from each element\ntoggleClass(el: HTMLElement, name: String, state: Boolean);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fsortable-dnd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmfuu%2Fsortable-dnd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmfuu%2Fsortable-dnd/lists"}