├── .gitignore
├── README.md
├── SortableList.svelte
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | yarn.lock
4 | .nvmrc


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🔃 SortableList
 2 | 
 3 | This component renders a list of items which can be reordered by draggin and dropping and implements FLIP animation for adding/removing/reordering items in the list.
 4 | 
 5 | To make the component work you need two thing at least: setting the `list` prop and responding to `on:reorder` event.
 6 | 
 7 | ### Basic Example ( [Open in REPL](https://svelte.dev/repl/413e33b7f34049f08e443a31d51f5367?version=3.6.4) )
 8 | 
 9 | ```jsx
10 | <script>
11 | import SortableList from 'svelte-sortable-list';
12 | 
13 | let list = ["First Item", "Second Item", "Third Item"];
14 | const sortList = ev => {list = ev.detail};
15 | </script>
16 | 
17 | <SortableList 
18 |     {list} 
19 |     on:sort={sortList}
20 | />
21 | ```
22 | 
23 | ## ⤵️ Props and Slot
24 | 
25 | | name   | type      | required | default                           |
26 | | ------ | --------- | -------- | --------------------------------- |
27 | | `list` | Array     | ✔️       | ✖️                                |
28 | | `key`  | String    | ❌       | ✖️                                |
29 | | `slot` | Component | ❌       | `<p>{key ? item[key] : item}</p>` |
30 | 
31 | The way this works is that you are required to pass a `list` prop to the component, which could be an array with anything inside, but if the array contains objects or arrays you must pass the `key` prop to specify what property is going to be used as key (needs to be unique to each object in the array).
32 | 
33 | You can customize what element is used as the list item passing any element as the child. If you do this you can access the item data by setting `let:item` on `<SortableList>` and `{item}` on your element ( you can also access the index in `let:index`).
34 | 
35 | ## ⤴️ Events
36 | 
37 | The component handles all the internal functionality but since you are passing the list as a prop, it can't actually change the data you pass to it, so you need to respond to an event that gets triggered any time you sort items.
38 | This is done using the `on:sort` event handler, which gets passed an `event` object that contains the list inside the `details` property ( this is the default way of handling event data in svelte).
39 | 
40 | 
41 | ### Complete Example ( [Open in REPL](https://svelte.dev/repl/0b4fd50a87a94efd81b533229b43d941?version=3.6.4) )
42 | 
43 | ```jsx
44 | <script>
45 | import SortableList from 'svelte-sortable-list';
46 | import Component from './Component.svelte';
47 | 
48 | let list = [
49 | 	{id: 1, name: 'First Item'},
50 | 	{id: 2, name: 'Second Item'},
51 | 	{id: 3, name: 'Third Item'}
52 | ];
53 | const sortList = ev => {list = ev.detail};
54 | </script>
55 | 
56 | <SortableList 
57 |     {list} 
58 |     key="id" 
59 |     on:sort={sortList}
60 |     let:item 
61 | >
62 |     <Component {item} />
63 | </SortableList>
64 | ```


--------------------------------------------------------------------------------
/SortableList.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { quintOut } from "svelte/easing";
  3 |   import { crossfade } from "svelte/transition";
  4 |   import { flip } from "svelte/animate";
  5 | 
  6 |   // FLIP ANIMATION
  7 |   const [send, receive] = crossfade({
  8 |     duration: d => Math.sqrt(d * 200),
  9 | 
 10 |     fallback(node, params) {
 11 |       const style = getComputedStyle(node);
 12 |       const transform = style.transform === "none" ? "" : style.transform;
 13 | 
 14 |       return {
 15 |         duration: 600,
 16 |         easing: quintOut,
 17 |         css: t => `
 18 | 					transform: ${transform} scale(${t});
 19 | 					opacity: ${t}
 20 | 				`
 21 |       };
 22 |     }
 23 |   });
 24 | 
 25 |   // DRAG AND DROP
 26 |   let isOver = false;
 27 |   const getDraggedParent = node =>
 28 |     node.dataset && node.dataset.index
 29 |       ? node.dataset
 30 |       : getDraggedParent(node.parentNode);
 31 |   const start = ev => {
 32 |     ev.dataTransfer.setData("source", ev.target.dataset.index);
 33 |   };
 34 |   const over = ev => {
 35 |     ev.preventDefault();
 36 |     let dragged = getDraggedParent(ev.target);
 37 |     if (isOver !== dragged.id) isOver = JSON.parse(dragged.id);
 38 |   };
 39 |   const leave = ev => {
 40 |     let dragged = getDraggedParent(ev.target);
 41 |     if (isOver === dragged.id) isOver = false;
 42 |   };
 43 |   const drop = ev => {
 44 |     isOver = false;
 45 |     ev.preventDefault();
 46 |     let dragged = getDraggedParent(ev.target);
 47 |     let from = ev.dataTransfer.getData("source");
 48 |     let to = dragged.index;
 49 |     reorder({ from, to });
 50 |   };
 51 | 
 52 |   // DISPATCH REORDER
 53 |   import { createEventDispatcher } from "svelte";
 54 |   const dispatch = createEventDispatcher();
 55 |   const reorder = ({ from, to }) => {
 56 |     let newList = [...list];
 57 |     newList[from] = [newList[to], (newList[to] = newList[from])][0];
 58 | 
 59 |     dispatch("sort", newList);
 60 |   };
 61 | 
 62 |   // UTILS
 63 |   const getKey = item => (key ? item[key] : item);
 64 | 
 65 |   // PROPS
 66 |   export let list;
 67 |   export let key;
 68 | </script>
 69 | 
 70 | <style>
 71 |   ul {
 72 |     list-style: none;
 73 |     padding: 0;
 74 |   }
 75 |   li {
 76 |     border: 2px dotted transparent;
 77 |     transition: border 0.1s linear;
 78 |   }
 79 |   .over {
 80 |     border-color: rgba(48, 12, 200, 0.2);
 81 |   }
 82 | </style>
 83 | 
 84 | {#if list && list.length}
 85 |   <ul>
 86 |     {#each list as item, index (getKey(item))}
 87 |       <li
 88 |         data-index={index}
 89 |         data-id={JSON.stringify(getKey(item))}
 90 |         draggable="true"
 91 |         on:dragstart={start}
 92 |         on:dragover={over}
 93 |         on:dragleave={leave}
 94 |         on:drop={drop}
 95 |         in:receive={{ key: getKey(item) }}
 96 |         out:send={{ key: getKey(item) }}
 97 |         animate:flip={{ duration: 300 }}
 98 |         class:over={getKey(item) === isOver}>
 99 |         <slot {item} {index}>
100 |           <p>{getKey(item)}</p>
101 |         </slot>
102 |       </li>
103 |     {/each}
104 |   </ul>
105 | {/if}
106 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-sortable-list",
 3 |   "version": "1.1.0",
 4 |   "lockfileVersion": 1,
 5 |   "requires": true,
 6 |   "dependencies": {
 7 |     "svelte": {
 8 |       "version": "3.6.4",
 9 |       "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.6.4.tgz",
10 |       "integrity": "sha512-oI2FAZK4iLUKwwf/ltn9Y9185+03LX3uMzKlVnLrkW5P1xazJnCOHBX5mI5FeyhSIPIyueTQtqJ9cQaEUMMXgA==",
11 |       "dev": true
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-sortable-list",
 3 |   "main": "SortableList.svelte",
 4 |   "svelte": "SortableList.svelte",
 5 |   "devDependencies": {
 6 |     "svelte": "^3.6.4"
 7 |   },
 8 |   "keywords": [
 9 |     "svelte",
10 |     "component",
11 |     "drag-n-drop",
12 |     "sortable",
13 |     "list"
14 |   ],
15 |   "description": "A svelte 3 component that implements a list with animated drag-n-drop functionality.",
16 |   "version": "1.1.0",
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+https://github.com/brunomolteni/svelte-sortable-list.git"
20 |   },
21 |   "author": "Bruno Molteni <bruno@molteni.dev>",
22 |   "license": "ISC",
23 |   "bugs": {
24 |     "url": "https://github.com/brunomolteni/svelte-sortable-list/issues"
25 |   },
26 |   "homepage": "https://github.com/brunomolteni/svelte-sortable-list#readme",
27 |   "peerDependencies": {
28 |     "svelte": "^3.4.1"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------