├── .gitignore
├── package.json
├── README.md
└── DragDropList.svelte


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /public/build/
3 | 
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-dragdroplist",
 3 |   "main": "DragDropList.svelte",
 4 |   "svelte": "DragDropList.svelte",
 5 |   "version": "1.1.1",
 6 |   "peerDependencies": {
 7 |     "svelte": "^3.0.0"
 8 |   },
 9 |   "devDependencies": {
10 |     "svelte": "^3.0.0"
11 |   },
12 |   "license": "ISC",
13 |   "respository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/jwlarocque/svelte-dragdroplist.git"
16 |   },
17 |   "bugs": {
18 |     "url": "https://github.com/jwlarocque/svelte-dragdroplist/issues"
19 |   },
20 |   "description": "Sortable lists with Svelte 3.  Animated, touch-friendly, and accessible.",
21 |   "author": "John LaRocque <john@jwlarocque.com>",
22 |   "homepage": "https://github.com/jwlarocque/svelte-dragdroplist",
23 |   "keywords": [
24 |     "svelte",
25 |     "drag",
26 |     "drop",
27 |     "list",
28 |     "sortable",
29 |     "component",
30 |     "dnd"
31 |   ]
32 | }
33 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte-DragDropList
 2 | 
 3 | Sortable lists [made with Svelte](https://madewithsvelte.com/svelte-dragdroplist).  [Available from NPM!](https://www.npmjs.com/package/svelte-dragdroplist)  
 4 | 
 5 | ### Why this component?
 6 | 
 7 | * Bidirectional binding - data order updates as soon as the user drags a list item into a new position, even before it is dropped
 8 | * Full touch support - doesn't use the HTML5 drag and drop API
 9 | * Accessible - includes buttons to move elements without dragging
10 | * Easier than writing a new one, probably.
11 | 
12 | ### Usage
13 | 
14 | [Basic REPL](https://svelte.dev/repl/6fb61b9868734493aec65eb53dc1a4bd?version=3.22.2)  
15 | [REPL with every feature!](https://svelte.dev/repl/915db3b3ed704fddb7ddfb64bcbc2624?version=3.22.2)  
16 | 
17 | The simplest way to use the component is to pass it an array of unique strings.  If you `bind:data`, the source array will be updated as the user rearranges its items.
18 | ```js
19 | <script>
20 |     import DragDropList from "svelte-dragdroplist";
21 | 
22 |     let data = ["Adams", "Boston", "Chicago", "Denver"];
23 | </script>
24 | 
25 | <DragDropList bind:data={data}/>
26 | ```
27 | 
28 | ##### Unique IDs
29 | 
30 | If you aren't sure that your strings will be unique, you should instead pass an array of objects, each with a unique ID:  
31 | 
32 | ```js
33 | let data = [{"id": 0, "text": "Boston"}, 
34 |             {"id": 1, "text": "Boston"}, 
35 |             {"id": 2, "text": "Chicago"}, 
36 |             {"id": 3, "text": "Denver"}];
37 | ```
38 | 
39 | ##### HTML
40 | 
41 | You can also include an "html" attribute instead of "text".  It's up to you to make sure the html is clean.  
42 |   If you want, you can even use both in one list.  
43 | ```js
44 | let data = [{"id": 0, "text": "Adams"}, 
45 |             {"id": 1, "text": "Boston"}, 
46 |             {"id": 2, "html": "<p style='color: blue;'>Chicago</p>"}, 
47 |             {"id": 3, "html": "<p style='color: red;'>Denver</p>"}];
48 | ```
49 | 
50 | ##### Removable Items
51 | 
52 | A delete button can be added to each item with the `removesItems` prop:
53 | ```js
54 | <DragDropList bind:data={data} removesItems={true}/>
55 | ```
56 | Note: _adding_ items is as simple as adding them to the data array.
57 | 
58 | ### Styling
59 | 
60 | To style the list and its elements from a parent component or global stylesheet, prefix your selectors with `.dragdroplist`.  You may need to increase the specificity of your selectors or even use the `!important` rule in order to override the classes applied by Svelte.  For example:
61 | 
62 | ```css
63 | :global(.dragdroplist) {} /* entire component */
64 | :global(.dragdroplist > .list > div.item) {} /* list item */
65 | :global(.dragdroplist div.buttons > button.down) {} /* move down button */
66 | :global(.dragdroplist div.content) {} /* text/html contents of item */
67 | ```
68 | 
69 | If you only need to style the contents of an item, you can also use an object with an `html` property as described above.
70 | 
71 | ### In Progress
72 | 
73 | * Additional animations on drop  


--------------------------------------------------------------------------------
/DragDropList.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |     import {flip} from "svelte/animate";
  3 |     
  4 |     export let data = [];
  5 |     export let removesItems = false;
  6 | 
  7 |     let ghost;
  8 |     let grabbed;
  9 | 
 10 |     let lastTarget;
 11 | 
 12 |     let mouseY = 0; // pointer y coordinate within client
 13 |     let offsetY = 0; // y distance from top of grabbed element to pointer
 14 |     let layerY = 0; // distance from top of list to top of client
 15 | 
 16 |     function grab(clientY, element) {
 17 |         // modify grabbed element
 18 |         grabbed = element;
 19 |         grabbed.dataset.grabY = clientY;
 20 | 
 21 |         // modify ghost element (which is actually dragged)
 22 |         ghost.innerHTML = grabbed.innerHTML;
 23 | 
 24 |         // record offset from cursor to top of element
 25 |         // (used for positioning ghost)
 26 |         offsetY = grabbed.getBoundingClientRect().y - clientY;
 27 |         drag(clientY);
 28 |     }
 29 | 
 30 |     // drag handler updates cursor position
 31 |     function drag(clientY) {
 32 |         if (grabbed) {
 33 |             mouseY = clientY;
 34 |             layerY = ghost.parentNode.getBoundingClientRect().y;
 35 |         }
 36 |     }
 37 | 
 38 |     // touchEnter handler emulates the mouseenter event for touch input
 39 |     // (more or less)
 40 |     function touchEnter(ev) {       
 41 |         drag(ev.clientY);
 42 |         // trigger dragEnter the first time the cursor moves over a list item
 43 |         let target = document.elementFromPoint(ev.clientX, ev.clientY).closest(".item");
 44 |         if (target && target != lastTarget) {
 45 |             lastTarget = target;
 46 |             dragEnter(ev, target);
 47 |         }
 48 |     }
 49 | 
 50 |     function dragEnter(ev, target) {
 51 |         // swap items in data
 52 |         if (grabbed && target != grabbed && target.classList.contains("item")) {
 53 |             moveDatum(parseInt(grabbed.dataset.index), parseInt(target.dataset.index));
 54 |         }
 55 |     }
 56 | 
 57 |     // does the actual moving of items in data
 58 |     function moveDatum(from, to) {
 59 |         let temp = data[from];
 60 |         data = [...data.slice(0, from), ...data.slice(from + 1)];
 61 |         data = [...data.slice(0, to), temp, ...data.slice(to)];
 62 |     }
 63 | 
 64 |     function release(ev) {
 65 |         grabbed = null;
 66 |     }
 67 | 
 68 |     function removeDatum(index) {
 69 |         data = [...data.slice(0, index), ...data.slice(index + 1)];
 70 |     }
 71 | </script>
 72 | 
 73 | <style>
 74 |     main {
 75 |         position: relative;
 76 |     }
 77 | 
 78 |     .list {
 79 |         cursor: grab;
 80 |         z-index: 5;
 81 |         display: flex;
 82 |         flex-direction: column;
 83 |     }
 84 | 
 85 |     .item {
 86 |         box-sizing: border-box;
 87 |         display: inline-flex;
 88 |         width: 100%;
 89 |         min-height: 3em;
 90 |         margin-bottom: 0.5em;
 91 |         background-color: white;
 92 |         border: 1px solid rgb(190, 190, 190);
 93 |         border-radius: 2px;
 94 |         user-select: none;
 95 |     }
 96 | 
 97 |     .item:last-child {
 98 |         margin-bottom: 0;
 99 |     }
100 | 
101 |     .item:not(#grabbed):not(#ghost) {
102 |         z-index: 10;
103 |     }
104 | 
105 |     .item > * {
106 |         margin: auto;
107 |     }
108 | 
109 |     .buttons {
110 |         width: 32px;
111 |         min-width: 32px;
112 |         margin: auto 0;
113 |         display: flex;
114 |         flex-direction: column;
115 |     }
116 | 
117 |     .buttons button {
118 |         cursor: pointer;
119 |         width: 18px;
120 |         height: 18px;
121 |         margin: 0 auto;
122 |         padding: 0;
123 |         border: 1px solid rgba(0, 0, 0, 0);
124 |         background-color: inherit;
125 |     }
126 | 
127 |     .buttons button:focus {
128 |         border: 1px solid black;
129 |     }
130 | 
131 |     .delete {
132 |         width: 32px;
133 |     }
134 | 
135 |     #grabbed {
136 |         opacity: 0.0;
137 |     }
138 | 
139 |     #ghost {
140 |         pointer-events: none;
141 |         z-index: -5;
142 |         position: absolute;
143 |         top: 0;
144 |         left: 0;
145 |         opacity: 0.0;
146 |     }
147 | 
148 |     #ghost * {
149 |         pointer-events: none;
150 |     }
151 | 
152 |     #ghost.haunting {
153 |         z-index: 20;
154 |         opacity: 1.0;
155 |     }
156 | </style>
157 | 
158 | <!-- All the documentation has to go up here, sorry.
159 |      (otherwise it conflicts with the HTML or svelte/animate) 
160 |      The .list has handlers for pointer movement and pointer up/release/end.
161 |      Each .item has a handler for pointer down/click/start, which assigns that
162 |      element as the item currently being "grabbed".  They also have a handler
163 |      for pointer enter (the touchmove handler has extra logic to behave like the
164 |      no longer extant 'touchenter'), which swaps the entered element with the
165 |      grabbed element when triggered.
166 |      You'll also find reactive styling below, which keeps it from being directly
167 |      part of the imperative javascript handlers. -->
168 | <main class="dragdroplist">
169 |     <div 
170 |         bind:this={ghost}
171 |         id="ghost"
172 |         class={grabbed ? "item haunting" : "item"}
173 |         style={"top: " + (mouseY + offsetY - layerY) + "px"}><p></p></div>
174 |     <div 
175 |         class="list"
176 |         on:mousemove={function(ev) {ev.stopPropagation(); drag(ev.clientY);}}
177 |         on:touchmove={function(ev) {ev.stopPropagation(); drag(ev.touches[0].clientY);}}
178 |         on:mouseup={function(ev) {ev.stopPropagation(); release(ev);}}
179 |         on:touchend={function(ev) {ev.stopPropagation(); release(ev.touches[0]);}}>
180 |         {#each data as datum, i (datum.id ? datum.id : JSON.stringify(datum))}
181 |             <div 
182 |                 id={(grabbed && (datum.id ? datum.id : JSON.stringify(datum)) == grabbed.dataset.id) ? "grabbed" : ""}
183 |                 class="item"
184 |                 data-index={i}
185 |                 data-id={(datum.id ? datum.id : JSON.stringify(datum))}
186 |                 data-grabY="0"
187 |                 on:mousedown={function(ev) {grab(ev.clientY, this);}}
188 |                 on:touchstart={function(ev) {grab(ev.touches[0].clientY, this);}}
189 |                 on:mouseenter={function(ev) {ev.stopPropagation(); dragEnter(ev, ev.target);}}
190 |                 on:touchmove={function(ev) {ev.stopPropagation(); ev.preventDefault(); touchEnter(ev.touches[0]);}}
191 |                 animate:flip|local={{duration: 200}}>
192 |                 <div class="buttons">
193 |                     <button 
194 |                         class="up" 
195 |                         style={"visibility: " + (i > 0 ? "" : "hidden") + ";"}
196 |                         on:click={function(ev) {moveDatum(i, i - 1)}}>
197 |                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
198 |                     </button>
199 |                     <button 
200 |                         class="down" 
201 |                         style={"visibility: " + (i < data.length - 1 ? "" : "hidden") + ";"}
202 |                         on:click={function(ev) {moveDatum(i, i + 1)}}>
203 |                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
204 |                     </button>
205 |                 </div>
206 | 
207 |                 <div class="content">
208 |                     {#if datum.html}
209 |                         {@html datum.html}
210 |                     {:else if datum.text}
211 |                         <p>{datum.text}</p>
212 |                     {:else}
213 |                         <p>{datum}</p>
214 |                     {/if}
215 |                 </div>
216 | 
217 |                 <div class="buttons delete">
218 |                     {#if removesItems}
219 |                         <button
220 |                             on:click={function(ev) {removeDatum(i);}}>
221 |                             <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
222 |                         </button>
223 |                     {/if}
224 |                 </div>
225 |             </div>
226 |         {/each}
227 |     </div>
228 | </main>


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