├── .npmrc ├── .prettierignore ├── table.gif ├── skeleton.gif ├── static └── favicon.png ├── src ├── lib │ ├── index.ts │ ├── MoveIcon.svelte │ └── SortableItem.svelte ├── app.d.ts ├── app.html └── routes │ ├── +layout.svelte │ ├── +page.svelte │ └── table │ └── +page.svelte ├── vite.config.ts ├── .prettierrc ├── .gitignore ├── .markdownlint.jsonc ├── tsconfig.json ├── .vscode ├── extensions.json └── settings.json ├── eslint.config.js ├── svelte.config.js ├── package.json └── README.md /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Package Managers 2 | package-lock.json 3 | pnpm-lock.yaml 4 | yarn.lock 5 | -------------------------------------------------------------------------------- /table.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaquimnetocel/svelte-sortable-items/HEAD/table.gif -------------------------------------------------------------------------------- /skeleton.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaquimnetocel/svelte-sortable-items/HEAD/skeleton.gif -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joaquimnetocel/svelte-sortable-items/HEAD/static/favicon.png -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | import MoveIcon from './MoveIcon.svelte'; 2 | import SortableItem from './SortableItem.svelte'; 3 | 4 | export { MoveIcon, SortableItem }; 5 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { sveltekit } from '@sveltejs/kit/vite'; 2 | import { defineConfig } from 'vite'; 3 | 4 | export default defineConfig({ 5 | plugins: [sveltekit()], 6 | }); 7 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # Output 4 | .output 5 | .vercel 6 | /.svelte-kit 7 | /build 8 | /dist 9 | 10 | # OS 11 | .DS_Store 12 | Thumbs.db 13 | 14 | # Env 15 | .env 16 | .env.* 17 | !.env.example 18 | !.env.test 19 | 20 | # Vite 21 | vite.config.js.timestamp-* 22 | vite.config.ts.timestamp-* 23 | -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; 14 | -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | 13 | -------------------------------------------------------------------------------- /.markdownlint.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "MD033": false, // THIS RULE IS TRIGGERED WHENEVER RAW HTML IS USED IN A MARKDOWN DOCUMENT. 3 | "MD013": false, // THIS RULE IS TRIGGERED WHEN THERE ARE LINES THAT ARE LONGER THAN THE CONFIGURED LINE_LENGTH (DEFAULT: 80 CHARACTERS). 4 | "MD010": false, // THIS RULE IS TRIGGERED BY ANY LINES THAT CONTAIN HARD TAB CHARACTERS INSTEAD OF USING SPACES FOR INDENTATION. 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json", 3 | "compilerOptions": { 4 | "allowJs": true, 5 | "checkJs": true, 6 | "esModuleInterop": true, 7 | "forceConsistentCasingInFileNames": true, 8 | "resolveJsonModule": true, 9 | "skipLibCheck": true, 10 | "sourceMap": true, 11 | "strict": true, 12 | "module": "NodeNext", 13 | "moduleResolution": "NodeNext" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "esbenp.prettier-vscode", // PRETTIER 4 | "svelte.svelte-vscode", // SVELTE FOR VS CODE 5 | "dbaeumer.vscode-eslint", // ESLINT 6 | 7 | "natqe.reload", // RELOAD 8 | "formulahendry.auto-rename-tag", // AUTO RENAME TAG 9 | "shd101wyy.markdown-preview-enhanced", // MARKDOWN PREVIEW ENHANCED 10 | "DavidAnson.vscode-markdownlint", // MARKDOWNLINT 11 | 12 | "MrAmericanMike.sveltesnippets", // SVELTE SNIPPETS 13 | "Chanzhaoyu.svelte-5-snippets" // SVELTE 5 SNIPPETS 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | {@render children()} 17 | 18 | 38 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js'; 2 | import ts from 'typescript-eslint'; 3 | import svelte from 'eslint-plugin-svelte'; 4 | import prettier from 'eslint-config-prettier'; 5 | import globals from 'globals'; 6 | 7 | /** @type {import('eslint').Linter.Config[]} */ 8 | export default [ 9 | js.configs.recommended, 10 | ...ts.configs.recommended, 11 | ...svelte.configs['flat/recommended'], 12 | prettier, 13 | ...svelte.configs['flat/prettier'], 14 | { 15 | languageOptions: { 16 | globals: { 17 | ...globals.browser, 18 | ...globals.node, 19 | }, 20 | }, 21 | }, 22 | { 23 | files: ['**/*.svelte'], 24 | languageOptions: { 25 | parserOptions: { 26 | parser: ts.parser, 27 | }, 28 | }, 29 | }, 30 | { 31 | ignores: ['build/', '.svelte-kit/', 'dist/'], 32 | }, 33 | ]; 34 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; 3 | 4 | /** @type {import('@sveltejs/kit').Config} */ 5 | const config = { 6 | // Consult https://kit.svelte.dev/docs/integrations#preprocessors 7 | // for more information about preprocessors 8 | preprocess: vitePreprocess(), 9 | 10 | kit: { 11 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 12 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter. 13 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 14 | adapter: adapter(), 15 | }, 16 | // RUNES MODE CONFIG: 17 | compilerOptions: { 18 | runes: true, 19 | }, 20 | ///// 21 | }; 22 | 23 | export default config; 24 | -------------------------------------------------------------------------------- /src/lib/MoveIcon.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 13 | 14 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |

MOVE THE ICON TO REORDER ELEMENTS.

21 | 22 | {#each stateUsers as currentUser, numberCounter (currentUser.id)} 23 |
24 | 29 |
30 | 31 | {currentUser.name} 32 |
33 | 34 |
35 | {/each} 36 | 37 |

{JSON.stringify(stateUsers)}

38 | 39 | 45 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | // FORMATTING SETTINGS: 3 | "editor.defaultFormatter": "esbenp.prettier-vscode", // PRETTIER AS DEFAULT FORMATTER. 4 | "[svelte]": { 5 | "editor.defaultFormatter": "svelte.svelte-vscode" // FORMATTER FOR SVELTE FILES. 6 | }, 7 | "editor.formatOnSave": true, // FORMAT A FILE ON SAVE. 8 | "editor.codeActionsOnSave": { 9 | "source.sortImports": "explicit" // SORT IMPORTS ON SAVE. 10 | }, 11 | ///// 12 | // LINTER AND INTELLISENSE SETTINGS: 13 | "eslint.validate": ["javascript", "svelte"], // AN ARRAY OF LANGUAGE IDS WHICH SHOULD BE VALIDATED BY ESLINT. 14 | "svelte.enable-ts-plugin": true, // 'SVELTE FOR VS CODE' TYPESCRIPT PLUGIN WHICH PROVIDES INTELLISENSE FOR SVELTE FILES INSIDE TS/JS FILES. 15 | "files.associations": { 16 | "*.json": "jsonc" // ENABLE COMMENTS IN JSON FILES. 17 | }, 18 | ///// 19 | // EXPLORER SIDEBAR: 20 | "explorer.sortOrder": "filesFirst", // FILES DISPLAYED BEFORE FOLDERS. 21 | "explorer.confirmDelete": false, // WON'T ASK FOR CONFIRMATION WHEN DELETING A FILE VIA THE TRASH. 22 | "explorer.compactFolders": false, // SINGLE CHILD FOLDERS WON'T BE COMPRESSED IN A COMBINED TREE ELEMENT. 23 | "workbench.tree.indent": 18, // TREE INDENTATION IN PIXELS. 24 | ///// 25 | // TAB: 26 | "editor.insertSpaces": false, // VSCODE WON'T INSERT SPACES WHEN PRESSING 'TAB'. 27 | "editor.tabSize": 4, // THE NUMBER OF SPACES A TAB IS EQUAL TO. 28 | "editor.detectIndentation": false, // DISABLE 'editor.tabSize' AND 'editor.insertSpaces' AUTOMATIC DETECTION BASED ON THE FILE CONTENTS. 29 | ///// 30 | // GIT: 31 | "git.autofetch": true, // COMMITS WILL AUTOMATICALLY BE FETCHED FROM THE DEFAULT REMOTE OF THE CURRENT GIT REPOSITORY. 32 | "git.enableSmartCommit": true, // COMMIT ALL CHANGES WHEN THERE ARE NO STAGED CHANGES. 33 | ///// 34 | // STARTUP: 35 | "workbench.startupEditor": "none", // START WITHOUT AN EDITOR IF NONE ARE RESTORED FROM THE PREVIOUS SESSION. 36 | ///// 37 | // WINDOW: 38 | "window.title": "${rootName}" // VSCODE WINDOW TITLE. 39 | ///// 40 | } 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-sortable-items", 3 | "version": "1.0.1", 4 | "description": "svelte-sortable-items is a svelte/sveltekit package to create sortable drag-and-drop items. This package allows you to relate a javascript array to sortable HTML elements.", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/joaquimnetocel/svelte-sortable-items.git" 8 | }, 9 | "bugs": { 10 | "url": "https://github.com/joaquimnetocel/svelte-sortable-items/issues" 11 | }, 12 | "keywords": [ 13 | "drag-and-drop", 14 | "reorder", 15 | "reordering", 16 | "sortable-lists", 17 | "sortable-table", 18 | "table-sorting", 19 | "svelte", 20 | "sveltekit", 21 | "svelte5" 22 | ], 23 | "author": "Joaquim Neto ", 24 | "license": "ISC", 25 | "scripts": { 26 | "dev": "vite dev", 27 | "build": "vite build && npm run package", 28 | "preview": "vite preview", 29 | "package": "svelte-kit sync && svelte-package && publint", 30 | "prepublishOnly": "npm run package", 31 | "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", 32 | "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", 33 | "lint": "prettier --check . && eslint .", 34 | "format": "prettier --write ." 35 | }, 36 | "exports": { 37 | ".": { 38 | "types": "./dist/index.d.ts", 39 | "svelte": "./dist/index.js" 40 | } 41 | }, 42 | "files": [ 43 | "dist", 44 | "!dist/**/*.test.*", 45 | "!dist/**/*.spec.*" 46 | ], 47 | "peerDependencies": { 48 | "svelte": "^5.0.0-next.1" 49 | }, 50 | "devDependencies": { 51 | "@sveltejs/adapter-auto": "^3.0.0", 52 | "@sveltejs/kit": "^2.0.0", 53 | "@sveltejs/package": "^2.0.0", 54 | "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6", 55 | "@types/eslint": "^9.6.0", 56 | "eslint": "^9.0.0", 57 | "eslint-config-prettier": "^9.1.0", 58 | "eslint-plugin-svelte": "^2.36.0", 59 | "globals": "^15.0.0", 60 | "prettier": "^3.1.1", 61 | "prettier-plugin-svelte": "^3.1.2", 62 | "publint": "^0.1.9", 63 | "svelte": "^5.0.0-next.1", 64 | "svelte-check": "^3.6.0", 65 | "typescript": "^5.0.0", 66 | "typescript-eslint": "^8.0.0", 67 | "vite": "^5.0.11" 68 | }, 69 | "svelte": "./dist/index.js", 70 | "types": "./dist/index.d.ts", 71 | "type": "module" 72 | } 73 | -------------------------------------------------------------------------------- /src/routes/table/+page.svelte: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 25 | 26 | 27 | 28 |
29 |
MOVE THE TABLE ROWS TO REORDER:
30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | {#each stateUsers as currentUser, numberCounter (currentUser.id)} 41 | 42 | 51 | 60 | 69 | 70 | {/each} 71 | 72 |
NAMEAGE
43 | 48 | 49 | 50 | 52 | 57 | {currentUser.name} 58 | 59 | 61 | 66 | {currentUser.age} 67 | 68 |
73 | 74 |

{JSON.stringify(stateUsers)}

75 |
76 | 77 | 83 | -------------------------------------------------------------------------------- /src/lib/SortableItem.svelte: -------------------------------------------------------------------------------- 1 | 59 | 60 | functionDragStart(parEvent, propItemNumber)} 65 | ondrop={(event) => functionDrop(event, propItemNumber)} 66 | ondragover={(parEvent: DragEvent & { currentTarget: EventTarget & HTMLElement }) => { 67 | parEvent.preventDefault(); 68 | return false; 69 | }} 70 | ondragenter={(parEvent: DragEvent & { currentTarget: EventTarget & HTMLElement }) => { 71 | parEvent.preventDefault(); 72 | propHoveredItemNumber = propItemNumber; 73 | }} 74 | > 75 | {@render children()} 76 | 77 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-sortable-items 2 | 3 | ![GITHUB VERSION](https://img.shields.io/github/package-json/v/joaquimnetocel/svelte-sortable-items?label=github%20version&logo=github&color=lightgray) ![NPM VERSION](https://img.shields.io/npm/v/svelte-sortable-items?color=red&logo=npm&label=npm%20version) ![NPM Downloads](https://img.shields.io/npm/dw/svelte-sortable-items?color=red&label=npm%20downloads&logo=npm) ![NPM License](https://img.shields.io/npm/l/svelte-sortable-items?color) [![Twitter](https://img.shields.io/twitter/follow/:twitterHandle.svg?style=social&label=@joaquimnetocel)](https://twitter.com/joaquimnetocel) 4 | 5 | svelte-sortable-items is a svelte/sveltekit package to create sortable drag-and-drop items. This package allows you to relate a javascript array to sortable HTML elements. 6 | 7 |

8 | TABLE 9 | SKELETON 10 |

11 | 12 | ## VERSIONS 13 | 14 | - VERSION 1.0.0 OR ABOVE WORKS WITH SVELTE 5 ONLY (NEWER AND RECOMMENDED VERSIONS WITH IMPROVEMENTS!) 15 | - PREVIOUS VERSIONS WORKS WITH SVELTE 3, 4 AND 5. 16 | 17 | ## WHY ANOTHER SVELTE PACKAGE FOR SORTING? 18 | 19 | **svelte-sorting-items** differs from other svelte sorting packages by not committing to a specific html structure (like "ul/li" lists). Furthermore, it promotes sorting from the child elements only, instead of sorting the children of a parent element. This allows a non-opinionated structure/styling and, consequently, the ordering of more flexible structures, such as the lines of a table for example. 20 | 21 | ## FEATURES 22 | 23 | - NON-OPINIONATED STYLING. 24 | - NON-OPINIONATED HTML STRUCTURE. 25 | - WORKS ON MOBILE. YOU JUST HAVE TO LOAD [svelte-drag-drop-touch](https://github.com/rozek/svelte-drag-drop-touch) 26 | - TYPESCRIPT SUPPORT. 27 | 28 | ## DEMOS 29 | 30 | - [REPL: BOOTSTRAP 5 TABLE EXAMPLE](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACu1VXW_bNhT9K5w2IAlgiU0dd5siGXNirXUaW4vtpRiqPtASLbGRSIKknDmC_vtAfUXW1pc9DnsxzHsPz-U95D0qjD1JsTTsz4VBUYYN25hxbowMdeR6IQ84VdgYGZLlItQRR4aCcAVSRGM3MJQMjGlAA0UyzoQCBViyA16EjI7AhgmFdileKJyBEuwFy8BZzWjKJmcShTN5dn1CsU8JH2yAiJIMKVwhaaBSrIBUSOHfJRYSuOCHanX-WScDVQAS2eByBHRTNji7Ywk9GwEUYxtcTUA56sPedrAlEk8tbDwewMY9Nopki5u8G-Cu-nTHFvZjC_tycX3SwAd2wAJHlUhdG-alRjmwFlsLTJ1aCDvBKKoUd74zTbCcffTAYgs--euPwF-BpX-zuPfA3Htc3HobYJo1tLk0KUI3MBKluLQhzCl_iq2QZbC5lEig2IwE46ZieZgExrR_gqpgS6hr3_j-drNdz37ryqSEPtVSJALve6XCiFpfZYRTchAWxQpSnsEdY0oqgfgvE-uN9RZGRCoYSvmasDJCrVDKwKhZBU7dwJDqmGKZYKzaOKEKx4Koo84maPzTlek9brYPqzFEL1y8v5zRbPwwj_nd_SL7eYXYmz9eLl9U-LB9_lXyaHycv5s8siTheX7rZ_ezzdfbljoUTEomSEyoGxiIMnrMWN6cCJ7q4sDBHVEnIgcQpkhKNzD4n-ZVMy06Pl36jx7YfvDAdnZz74G1_2kDtj5Ye_567q1tB2pQ_dydalg6pnpVD5BUgnAcgWcT5Yo1_HpH91Dqpej-V8mpA1UyCK1mS-8fwrP3p1EHdmQ6_lrGUTsWHTtc8T1GYdIfUyRBmAuBqdLrEaB5tsPiluVUYQHOezmLRBdl_xgCNA5gV-5QKWFXv80AucXfx8l1T0uUvc40aXSyDpTTt6zTVKB2hEY2F4zPkUJNtaqtcojUIM2wqmq7xekZvsnbO3q7c9jSYPN0yOW07gs04Ya8YLe4nJQADhuF_U5PVYEDWf6DMhX9l6bNuvxfnm_Jg-J_r07PKQJVQG0HZWccnVc4sCJrrY5Pi7uNv7K0sdGY7I_nryJdlA7kldO23uhUX4OKx-rbASjqQjsUPsWC5TQyQ5YyYYOUxInapTm-bhy-Dj8nRNWhsnLyhtYYGRmLyJ7gyLCVyHH5pfwLBn1atDYJAAA=) 31 | - [REPL: BASIC EXAMPLE](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACnWSW2-bQBCF_8p0W8m2BEa5tRIBpDRBipPYSLabPoQ8rGGNV4FdtDu4chH_veKWYEd9Qdqdbw8z50xJtjxlmtgvJRE0Y8QmN3lODIKHvD7oPUuREYNoWaiovnF0pHiOkFKRuCFBHRIvFCHyLJcKoYS53LNZJIUBK6mQblI2Q5ZBBVslMxi1iqbuaiZHlunR9ZHENuX5yQOLCp5RZA0pQkwZgkaK7JdmSoML35rT-KUuhlgCj204M6AeyobRg9yJkQE0YTZcXkFlDLHzd2xO1VuPXVycYBcDNUF1z119P-Euh3KHHvvRY6-T66MB7uWeKRY3JvVjOKLINkx5Y_Osph2rNb02WjitIfaO0bhx3vlimjC_efRhtobfwfIRggXMg5-zJx_u_OfZrb8C02zRLjytIjckO8Rc25ZViPwtmUYys7pwYkUTM1YyN1EW0S4k3rCD5oeNoGOd9CKc3JsHzz6s731w-k2AXMl8xf8ytzw7r8DyYHYbLGAdwNIPlnf-Evwnf-4v1qupY-WNTvmV0Wg3TJhqiAqlmMD6bEDr0K0sBDIF40FtyuNJ1fQZ8z10e2PXO-W1MTnDxWyvQqx7rM-LRtctj_SrntpwEds1ekeRuuVHf5-JQa695mne3SOvf9s0HKVUa7v5dujnh-C67rED1btIiP83_oMph4bV6_o-gGPFfN87ZQ2tasPvyqVVJ1R1oZcPq2Ax1ai4SPj2MP4wZlL1mToaDylrRKbD8aBsf7ah0VuiZCFiM5KpVDakPNnhJi3YdUt01392HNurqtnBTpYYJJMx33IWExtVwarX6h-goru64AQAAA==) 32 | 33 | ## INSTALLATION 34 | 35 | ```bash 36 | npm install svelte-sortable-items 37 | ``` 38 | 39 | ## BASIC EXAMPLE 40 | 41 | ```svelte 42 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |

MOVE THE ICON TO REORDER ELEMENTS.

62 | 63 | {#each stateUsers as currentUser, numberCounter (currentUser.id)} 64 |
65 | 70 |
71 | 72 | {currentUser.name} 73 |
74 | 75 |
76 | {/each} 77 | 78 |

{JSON.stringify(stateUsers)}

79 | 80 | 86 | ``` 87 | 88 | ## MORE EXAMPLES 89 | 90 | To run the examples from `/src/routes`: 91 | 92 | ```bash 93 | git clone https://github.com/joaquimnetocel/svelte-sortable-items.git 94 | cd svelte-sortable-items 95 | npm install 96 | npm run dev 97 | ``` 98 | 99 | ## COMPONENT STRUCTURE 100 | 101 | - `SortableItem`: A component to create sortable html elements. 102 | - `MoveIcon`: An icon commonly used to sort items. 103 | 104 | ## PROPS 105 | 106 | - PROPS OF `SortableItem`: 107 | 108 | | PROP | DESCRIPTION | TYPE | REQUIRED | DEFAULT | 109 | | ---------------------------------- | ----------------------------------------------------------------------------- | ----------- | -------- | ----------- | 110 | | `propData` (bindable) | AN ARRAY WITH THE DATA. | `unknown[]` | YES | - | 111 | | `propItemNumber` | THE INITIAL POSITION OF THE ITEM. | `number` | YES | `undefined` | 112 | | `propHoveredItemNumber` (bindable) | THE HOVERED ITEM NUMBER (GENERALY USED TO DO SPECIFIC STYLING WHEN HOVERING). | `number` | NO | `-1` | 113 | | `propIsImageHidden` | MAKE THE GHOST IMAGE WHEN DRAGGING TRANSPARENT | `boolean` | NO | `false` | 114 | 115 | - PROPS OF `MoveIcon`: 116 | 117 | | PROP | DESCRIPTION | TYPE | REQUIRED | DEFAULT | 118 | | ---------- | --------------------- | -------- | -------- | ------- | 119 | | `propSize` | SIZE OF THE SORT ICON | `number` | NO | 12 | 120 | --------------------------------------------------------------------------------