├── .gitignore
├── store.js
├── package.json
├── README.md
└── index.svelte


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | # Project exclude paths
3 | /node_modules/


--------------------------------------------------------------------------------
/store.js:
--------------------------------------------------------------------------------
1 | import {writable} from "svelte/store"
2 | 
3 | export default writable()


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-sortable",
 3 |   "version": "0.1.1",
 4 |   "description": "A Svelte wrapper component for SortableJS.",
 5 |   "main": "index.svelte",
 6 |   "author": "robin@pettersen.dev",
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/ctrl-alt-null/svelte-sortable"
11 |   },
12 |   "peerDependencies": {
13 |     "svelte": "^3.0.0"
14 |   },
15 |   "dependencies": {
16 |     "sortablejs": "^1.10.1"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # SVELTE-SORTABLE
 2 | 
 3 | >A Svelte wrapper component for [SortableJS](https://sortablejs.github.io/Sortable/).
 4 | 
 5 | ## Install
 6 | `npm i -S svelte-sortable` or `yarn add svelte-sortable`
 7 | 
 8 | ## Usage
 9 | ```sveltehtml
10 | <script>
11 |     import { Sortable, MultiDrag } from "svelte-sortable"
12 | 
13 |     // In case multiselection is to be used 
14 |     Sortable.mount(new MultiDrag());
15 | 
16 |     let items = [
17 |         "foo",
18 |         "bar",
19 |         "baz",
20 |     ]
21 | 
22 |     function onChange() {
23 |         //`items` are mutated
24 |         console.log(items)
25 |     }
26 | 
27 | </script>
28 | 
29 | <Sortable {items}
30 |           let:item={item}
31 |           on:change={onChange}>
32 |     <div>
33 |         {item}
34 |     </div>
35 | </Sortable>
36 | ```
37 | 


--------------------------------------------------------------------------------
/index.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     import Sortable from "sortablejs";
  3 | 
  4 |     import { createEventDispatcher } from "svelte";
  5 |     import store from "./store.js";
  6 | 
  7 |     // var sortable = new Sortable(el, {
  8 |     //     group: "name",  // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
  9 |     //     sort: true,  // sorting inside list
 10 |     //     delay: 0, // time in milliseconds to define when the sorting should start
 11 |     //     delayOnTouchOnly: false, // only delay if user is using touch
 12 |     //     touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag event
 13 |     //     disabled: false, // Disables the sortable if set to true.
 14 |     //     store: null,  // @see Store
 15 |     //     animation: 150,  // ms, animation speed moving items when sorting, `0` — without animation
 16 |     //     easing: "cubic-bezier(1, 0, 0, 1)", // Easing for animation. Defaults to null. See https://easings.net/ for examples.
 17 |     //     handle: ".my-handle",  // Drag handle selector within list items
 18 |     //     filter: ".ignore-elements",  // Selectors that do not lead to dragging (String or Function)
 19 |     //     preventOnFilter: true, // Call `event.preventDefault()` when triggered `filter`
 20 |     //     draggable: ".item",  // Specifies which items inside the element should be draggable
 21 |     //
 22 |     //     dataIdAttr: 'data-id',
 23 |     //
 24 |     //     ghostClass: "sortable-ghost",  // Class name for the drop placeholder
 25 |     //     chosenClass: "sortable-chosen",  // Class name for the chosen item
 26 |     //     dragClass: "sortable-drag",  // Class name for the dragging item
 27 |     //
 28 |     //     swapThreshold: 1, // Threshold of the swap zone
 29 |     //     invertSwap: false, // Will always use inverted swap zone if set to true
 30 |     //     invertedSwapThreshold: 1, // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
 31 |     //     direction: 'horizontal', // Direction of Sortable (will be detected automatically if not given)
 32 |     //
 33 |     //     forceFallback: false,  // ignore the HTML5 DnD behaviour and force the fallback to kick in
 34 |     //
 35 |     //     fallbackClass: "sortable-fallback",  // Class name for the cloned DOM Element when using forceFallback
 36 |     //     fallbackOnBody: false,  // Appends the cloned DOM Element into the Document's Body
 37 |     //     fallbackTolerance: 0, // Specify in pixels how far the mouse should move before it's considered as a drag.
 38 |     //
 39 |     //     dragoverBubble: false,
 40 |     //     removeCloneOnHide: true, // Remove the clone element when it is not showing, rather than just hiding it
 41 |     //     emptyInsertThreshold: 5, // px, distance mouse must be from empty sortable to insert drag element into it
 42 |     //
 43 |     //
 44 |     //     setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) {
 45 |     //         dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent
 46 |     //     },
 47 |     //
 48 |     //     // Element is chosen
 49 |     //     onChoose: function (/**Event*/evt) {
 50 |     //         evt.oldIndex;  // element index within parent
 51 |     //     },
 52 |     //
 53 |     //     // Element is unchosen
 54 |     //     onUnchoose: function(/**Event*/evt) {
 55 |     //         // same properties as onEnd
 56 |     //     },
 57 |     //
 58 |     //     // Element dragging started
 59 |     //     onStart: function (/**Event*/evt) {
 60 |     //         evt.oldIndex;  // element index within parent
 61 |     //     },
 62 |     //
 63 |     //     // Element dragging ended
 64 |     //     onEnd: function (/**Event*/evt) {
 65 |     //         var itemEl = evt.item;  // dragged HTMLElement
 66 |     //         evt.to;    // target list
 67 |     //         evt.from;  // previous list
 68 |     //         evt.oldIndex;  // element's old index within old parent
 69 |     //         evt.newIndex;  // element's new index within new parent
 70 |     //         evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
 71 |     //         evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
 72 |     //         evt.clone // the clone element
 73 |     //         evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
 74 |     //     },
 75 |     //
 76 |     //     // Element is dropped into the list from another list
 77 |     //     onAdd: function (/**Event*/evt) {
 78 |     //         // same properties as onEnd
 79 |     //     },
 80 |     //
 81 |     //     // Changed sorting within list
 82 |     //     onUpdate: function (/**Event*/evt) {
 83 |     //         // same properties as onEnd
 84 |     //     },
 85 |     //
 86 |     //     // Called by any change to the list (add / update / remove)
 87 |     //     onSort: function (/**Event*/evt) {
 88 |     //         // same properties as onEnd
 89 |     //     },
 90 |     //
 91 |     //     // Element is removed from the list into another list
 92 |     //     onRemove: function (/**Event*/evt) {
 93 |     //         // same properties as onEnd
 94 |     //     },
 95 |     //
 96 |     //     // Attempt to drag a filtered element
 97 |     //     onFilter: function (/**Event*/evt) {
 98 |     //         var itemEl = evt.item;  // HTMLElement receiving the `mousedown|tapstart` event.
 99 |     //     },
100 |     //
101 |     //     // Event when you move an item in the list or between lists
102 |     //     onMove: function (/**Event*/evt, /**Event*/originalEvent) {
103 |     //         // Example: https://jsbin.com/nawahef/edit?js,output
104 |     //         evt.dragged; // dragged HTMLElement
105 |     //         evt.draggedRect; // DOMRect {left, top, right, bottom}
106 |     //         evt.related; // HTMLElement on which have guided
107 |     //         evt.relatedRect; // DOMRect
108 |     //         evt.willInsertAfter; // Boolean that is true if Sortable will insert drag element after target by default
109 |     //         originalEvent.clientY; // mouse position
110 |     //         // return false; — for cancel
111 |     //         // return -1; — insert before target
112 |     //         // return 1; — insert after target
113 |     //     },
114 |     //
115 |     //     // Called when creating a clone of element
116 |     //     onClone: function (/**Event*/evt) {
117 |     //         var origEl = evt.item;
118 |     //         var cloneEl = evt.clone;
119 |     //     },
120 |     //
121 |     //     // Called when dragging element changes position
122 |     //     onChange: function(/**Event*/evt) {
123 |     //         evt.newIndex // most likely why this event is used is to get the dragging element's current index
124 |     //         // same properties as onEnd
125 |     //     }
126 |     // });
127 | 
128 |     const dispatch = createEventDispatcher();
129 | 
130 |     export let options = {};
131 |     export let items = [];
132 | 
133 |     function create(node) {
134 |         const sortable = Sortable.create(
135 |             node,
136 |             Object.assign(options, {
137 |                 onRemove: (ev) => {
138 |                     if (ev.oldIndicies.length > 0) {
139 |                         for (let i = ev.oldIndicies.length - 1; i >= 0; i--) {
140 |                             items.splice(ev.oldIndicies[i].index, 1);
141 |                         }
142 |                     } else {
143 |                         items.splice(ev.oldIndex, 1);
144 |                     }
145 |                 },
146 |                 onAdd: (ev) => {
147 |                     if (ev.newIndicies.length > 0) {
148 |                         for (let i = 0; i < ev.newIndicies.length; i++) {
149 |                             items.splice(
150 |                                 ev.newIndicies[i].index,
151 |                                 0,
152 |                                 $store.items[i]
153 |                             );
154 |                         }
155 |                     } else {
156 |                         items.splice(ev.newIndex, 0, $store.items);
157 |                     }
158 |                 },
159 |                 onStart: (ev) => {
160 |                     store.set({
161 |                         from: ev.from,
162 |                         items:
163 |                             ev.oldIndicies.length > 0
164 |                                 ? ev.oldIndicies.map((i) => items[i.index])
165 |                                 : items[ev.oldIndex],
166 |                     });
167 |                 },
168 |                 onUpdate: (ev) => {
169 |                     // guard against 'update' event fired when there is more than one list -
170 |                     // source list is reordered, and this breaks 'remove' event fired later,
171 |                     // as indicies values are not valid any longer
172 |                     if (ev.pullMode !== true && ev.oldIndicies.length > 0) {
173 |                         moveArrayElements(
174 |                             items,
175 |                             ev.oldIndicies,
176 |                             ev.newIndicies
177 |                         );
178 |                     } else {
179 |                         moveArrayElement(items, ev.oldIndex, ev.newIndex);
180 |                     }
181 |                 },
182 |                 onEnd: () => {
183 |                     dispatch("change");
184 |                 },
185 |             })
186 |         );
187 | 
188 |         return {
189 |             destroy() {
190 |                 sortable.destroy();
191 |             },
192 |         };
193 |     }
194 | 
195 |     function moveArrayElement(array, from, to) {
196 |         const item = array[from];
197 |         array.splice(from, 1);
198 |         array.splice(to, 0, item);
199 |     }
200 | 
201 |     function moveArrayElements(array, oldIndicies, newIndicies) {
202 |         const itemsNo = oldIndicies.length;
203 |         // mappings [ [src idx1, dest idx2], ... , [src idxn, dest idxn]]
204 |         let mappings = new Array(itemsNo);
205 |         for (let i = 0; i < itemsNo; i++) {
206 |             mappings[i] = [oldIndicies[i].index, newIndicies[i].index];
207 |         }
208 |         // first extract items to be moved
209 |         let tmp = new Array(itemsNo);
210 |         for (i = itemsNo - 1; i >= 0; i--) {
211 |             tmp[i] = array.splice(mappings[i][0], 1)[0];
212 |         }
213 |         // moved items form a continous block, so it is easy to insert them
214 |         array.splice(mappings[0][1], 0, ...tmp);
215 |     }
216 | </script>
217 | 
218 | <div use:create>
219 |     {#each items as item}
220 |         <slot {item} />
221 |     {/each}
222 | </div>
223 | 


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