From f98684df36a79b6774f3c5627d4f2649c1e61c9a Mon Sep 17 00:00:00 2001
From: feugy <damien.feugas@gmail.com>
Date: Thu, 1 Oct 2020 10:19:53 +0200
Subject: [PATCH] feat(ui): more efficient sortable list component with drag'n
 drop events

---
 README.md                                     |   1 -
 renderer/App.svelte                           |  12 +-
 .../auto-scrollable.stories.storyshot         | 126 +++++++++++----
 .../auto-scrollable.stories.js                |   5 +-
 .../auto-scrollable.stories.svelte            |   6 +-
 .../auto-scrollable/auto-scrollable.test.js   |  67 ++++----
 renderer/actions/auto-scrollable/index.js     |  22 +--
 .../PlaylistTracksTable.test.js               |  27 ++--
 .../PlaylistTracksTable.stories.storyshot     |  59 ++++---
 .../SortableList/SortableList.svelte          | 147 ++++++------------
 .../SortableList/SortableList.test.js         |  88 +++++------
 .../SortableList.stories.storyshot            |  29 ++--
 .../TracksQueue/TracksQueue.test.js           |  32 ++--
 .../TracksQueue.stories.storyshot             |  34 ++--
 renderer/components/index.js                  |   1 -
 15 files changed, 331 insertions(+), 325 deletions(-)

diff --git a/README.md b/README.md
index 03ccff83..47c4f0e8 100644
--- a/README.md
+++ b/README.md
@@ -53,7 +53,6 @@ There are thunsands of them in the wild. This mine is an excuse for learning [El
 
 ### Bugs and known issues
 
-1. now that I'm not using FLIP animations, native drag'n drop may be leaner than my mouse-event based implementation
 1. Undetected live changes: remove tracks and re-add them. This is a linux-only issue with chokidar
    - https://github.com/paulmillr/chokidar/issues/917
    - https://github.com/paulmillr/chokidar/issues/591
diff --git a/renderer/App.svelte b/renderer/App.svelte
index 2e449faa..201807a4 100644
--- a/renderer/App.svelte
+++ b/renderer/App.svelte
@@ -8,7 +8,6 @@
     Nav,
     Sheet,
     Snackbar,
-    SortableListConstants,
     SystemNotifier,
     TracksQueue,
     Tutorial
@@ -23,7 +22,6 @@
   let isPlaylistOpen = true
   let ready = false
   let scrollable
-  const { isMoveInProgress } = SortableListConstants
 
   onMount(async () => {
     const settings = await invoke('settings.get')
@@ -84,17 +82,11 @@
   <div>
     <main>
       <Sheet bind:open={isPlaylistOpen}>
-        <section
-          slot="main"
-          bind:this={scrollable}
-          use:autoScrollable={{ enabled: $isMoveInProgress }}>
+        <section slot="main" bind:this={scrollable} use:autoScrollable>
           <Nav />
           <Router {scrollable} />
         </section>
-        <aside
-          slot="aside"
-          id="queue"
-          use:autoScrollable={{ enabled: $isMoveInProgress }}>
+        <aside slot="aside" id="queue" use:autoScrollable>
           <TracksQueue />
         </aside>
       </Sheet>
diff --git a/renderer/actions/auto-scrollable/__snapshots__/auto-scrollable.stories.storyshot b/renderer/actions/auto-scrollable/__snapshots__/auto-scrollable.stories.storyshot
index d2cefcb1..ab27687a 100644
--- a/renderer/actions/auto-scrollable/__snapshots__/auto-scrollable.stories.storyshot
+++ b/renderer/actions/auto-scrollable/__snapshots__/auto-scrollable.stories.storyshot
@@ -4,98 +4,164 @@ exports[`Storyshots Actions/auto-scrollable Default 1`] = `
 <section
   class="storybook-snapshot-container"
 >
+  <p
+    class="p-4 font-bold"
+  >
+    Caution: does not work on Firefox (DragEvent always have 0 clientY)
+  </p>
+   
   <ol
     class="svelte-886hq0"
     style="--padding: 75px; --margin: -75px;"
   >
-    <li>
+    <li
+      draggable="true"
+    >
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       In eu mi bibendum neque egestas congue quisque egestas
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Arcu non odio euismod lacinia at quis risus sed
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Massa tempor nec feugiat nisl
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Sagittis aliquam malesuada bibendum arcu vitae elementum
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Elementum facilisis leo vel fringilla est ullamcorper eget nulla
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Bibendum arcu vitae elementum curabitur vitae nunc sed velit dignissim
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Elit sed vulputate mi sit amet mauris commodo
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Lorem mollis aliquam ut porttitor leo a diam sollicitudin
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Vitae proin sagittis nisl rhoncus mattis
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Ut morbi tincidunt augue interdum velit euismod in pellentesque
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Aliquam purus sit amet luctus venenatis lectus magna
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Amet venenatis urna cursus eget
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Et pharetra pharetra massa massa
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Ac ut consequat semper viverra nam libero justo laoreet
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Eget arcu dictum varius duis at consectetur lorem
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Tellus id interdum velit laoreet id donec
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Aliquam sem fringilla ut morbi
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Consequat nisl vel pretium lectus quam id leo in vitae
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Velit scelerisque in dictum non
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Pretium aenean pharetra magna ac
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Tincidunt arcu non sodales neque sodales ut etiam
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Cursus eget nunc scelerisque viverra mauris in aliquam
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Tortor at auctor urna nunc id cursus
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Consequat interdum varius sit amet mattis vulputate enim nulla
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Sagittis vitae et leo duis ut
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Pretium lectus quam id leo in
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Fusce ut placerat orci nulla pellentesque dignissim enim sit
     </li>
-    <li>
+    <li
+      draggable="true"
+    >
       Sed cras ornare arcu dui vivamus arcu.
     </li>
   </ol>
diff --git a/renderer/actions/auto-scrollable/auto-scrollable.stories.js b/renderer/actions/auto-scrollable/auto-scrollable.stories.js
index fd3d76a7..b1c1e073 100644
--- a/renderer/actions/auto-scrollable/auto-scrollable.stories.js
+++ b/renderer/actions/auto-scrollable/auto-scrollable.stories.js
@@ -1,6 +1,6 @@
 'use strict'
 
-import { withKnobs, number, boolean } from '@storybook/addon-knobs'
+import { withKnobs, number } from '@storybook/addon-knobs'
 import Scrollable from './auto-scrollable.stories.svelte'
 
 export default {
@@ -11,8 +11,7 @@ export default {
 export const Default = () => ({
   Component: Scrollable,
   props: {
-    enabled: boolean('Enabled', true),
     borderDetection: number('Border detection', 75),
-    maxScroll: number('Max scroll', 50)
+    maxScroll: number('Max scroll', 30)
   }
 })
diff --git a/renderer/actions/auto-scrollable/auto-scrollable.stories.svelte b/renderer/actions/auto-scrollable/auto-scrollable.stories.svelte
index 5e1d53aa..fe931c94 100644
--- a/renderer/actions/auto-scrollable/auto-scrollable.stories.svelte
+++ b/renderer/actions/auto-scrollable/auto-scrollable.stories.svelte
@@ -54,10 +54,14 @@
   }
 </style>
 
+<p class="p-4 font-bold">
+  Caution: does not work on Firefox (DragEvent always have 0 clientY)
+</p>
+
 <ol
   use:autoScrollable={$$restProps}
   style="--padding:{$$restProps.borderDetection}px; --margin:{-$$restProps.borderDetection}px;">
   {#each texts as text}
-    <li>{text}</li>
+    <li draggable="true">{text}</li>
   {/each}
 </ol>
diff --git a/renderer/actions/auto-scrollable/auto-scrollable.test.js b/renderer/actions/auto-scrollable/auto-scrollable.test.js
index b405fe51..d00cb217 100644
--- a/renderer/actions/auto-scrollable/auto-scrollable.test.js
+++ b/renderer/actions/auto-scrollable/auto-scrollable.test.js
@@ -10,6 +10,7 @@ describe('autoScrollable action', () => {
   let clientHeight
   let scrollHeight
   let scrollTop
+  let clientY
 
   beforeAll(() => {
     Object.defineProperties(window.HTMLOListElement.prototype, {
@@ -17,6 +18,13 @@ describe('autoScrollable action', () => {
       scrollHeight: { get: () => scrollHeight },
       scrollTop: { get: () => scrollTop }
     })
+    // JSDom does not support DragEvent, and falls back to Event instead
+    Object.defineProperty(Event.prototype, 'clientY', {
+      enumerable: true,
+      get() {
+        return clientY
+      }
+    })
   })
 
   beforeEach(() => {
@@ -32,12 +40,12 @@ describe('autoScrollable action', () => {
     const list = items[0].closest('ol')
     list.scrollBy = jest.fn()
 
-    await fireEvent.mouseEnter(list)
-    await fireEvent.mouseMove(items[10], { clientY: clientHeight - 15 })
-    await fireEvent.mouseLeave(list)
+    clientY = clientHeight - 15
+    fireEvent.drag(items[10])
+    fireEvent.dragEnd(list)
     await sleep()
 
-    expect(list.scrollBy).toHaveBeenCalledWith({ top: 40 })
+    expect(list.scrollBy).toHaveBeenCalledWith({ top: 24 })
   })
 
   it('does not scrolls down when already at the bottom', async () => {
@@ -47,9 +55,9 @@ describe('autoScrollable action', () => {
     const list = items[0].closest('ol')
     list.scrollBy = jest.fn()
 
-    await fireEvent.mouseEnter(list)
-    await fireEvent.mouseMove(items[20], { clientY: clientHeight - 15 })
-    await fireEvent.mouseLeave(list)
+    clientY = clientHeight - 15
+    fireEvent.drag(items[20])
+    fireEvent.dragEnd(list)
     await sleep()
 
     expect(list.scrollBy).not.toHaveBeenCalled()
@@ -62,12 +70,12 @@ describe('autoScrollable action', () => {
     const list = items[0].closest('ol')
     list.scrollBy = jest.fn()
 
-    await fireEvent.mouseEnter(list)
-    await fireEvent.mouseMove(items[10], { clientY: 15 })
-    await fireEvent.mouseLeave(list)
+    clientY = 15
+    fireEvent.drag(items[10])
+    fireEvent.dragEnd(list)
     await sleep()
 
-    expect(list.scrollBy).toHaveBeenCalledWith({ top: -40 })
+    expect(list.scrollBy).toHaveBeenCalledWith({ top: -24 })
   })
 
   it('does not scrolls up when already at the top', async () => {
@@ -76,9 +84,9 @@ describe('autoScrollable action', () => {
     const list = items[0].closest('ol')
     list.scrollBy = jest.fn()
 
-    await fireEvent.mouseEnter(list)
-    await fireEvent.mouseMove(items[0], { clientY: 15 })
-    await fireEvent.mouseLeave(list)
+    clientY = 15
+    fireEvent.drag(items[0])
+    fireEvent.dragEnd(list)
     await sleep()
 
     expect(list.scrollBy).not.toHaveBeenCalled()
@@ -91,10 +99,11 @@ describe('autoScrollable action', () => {
     const list = items[0].closest('ol')
     list.scrollBy = jest.fn()
 
-    await fireEvent.mouseEnter(list)
-    await fireEvent.mouseMove(items[0], { clientY: 15 })
-    await fireEvent.mouseMove(items[29], { clientY: clientHeight - 15 })
-    await fireEvent.mouseLeave(list)
+    clientY = 15
+    fireEvent.drag(items[0])
+    clientY = clientHeight - 15
+    fireEvent.drag(items[29])
+    fireEvent.dragEnd(list)
     await sleep()
 
     expect(list.scrollBy).not.toHaveBeenCalled()
@@ -106,25 +115,9 @@ describe('autoScrollable action', () => {
     const list = items[0].closest('ol')
     list.scrollBy = jest.fn()
 
-    await fireEvent.mouseEnter(list)
-    await fireEvent.mouseMove(items[5], { clientY: itemHeight * 5 })
-    await fireEvent.mouseLeave(list)
-    await sleep()
-
-    expect(list.scrollBy).not.toHaveBeenCalled()
-  })
-
-  it('does not scroll when disabled', async () => {
-    scrollTop = 10 * itemHeight
-    render(html`<${Scrollable} enabled=${false} />`)
-    const items = screen.queryAllByRole('listitem')
-    const list = items[0].closest('ol')
-    list.scrollBy = jest.fn()
-
-    await fireEvent.mouseEnter(list)
-    await fireEvent.mouseMove(items[10], { clientY: 15 })
-    await fireEvent.mouseMove(items[20], { clientY: clientHeight - 15 })
-    await fireEvent.mouseLeave(list)
+    clientY = itemHeight * 5
+    fireEvent.drag(items[5])
+    fireEvent.dragEnd(list)
     await sleep()
 
     expect(list.scrollBy).not.toHaveBeenCalled()
diff --git a/renderer/actions/auto-scrollable/index.js b/renderer/actions/auto-scrollable/index.js
index 8f1a640c..2486b0be 100644
--- a/renderer/actions/auto-scrollable/index.js
+++ b/renderer/actions/auto-scrollable/index.js
@@ -3,26 +3,19 @@
 export function autoScrollable(node, params = {}) {
   let borderDetection
   let maxScroll
-  let enabled
   let scrollBy
   let timeout
 
   function destroy() {
-    node.removeEventListener('mousemove', handleMouseMove)
-    node.removeEventListener('mouseleave', handleMouseLeave)
+    node.removeEventListener('drag', handleMouseMove)
+    node.removeEventListener('dragend', handleMouseLeave)
   }
 
   function update(params = {}) {
     borderDetection = params.borderDetection | 75
-    maxScroll = params.maxScroll || 50
-    enabled = params.enabled !== undefined ? params.enabled : true
-    if (enabled) {
-      node.addEventListener('mousemove', handleMouseMove)
-      node.addEventListener('mouseleave', handleMouseLeave)
-    } else {
-      handleMouseLeave()
-      destroy()
-    }
+    maxScroll = params.maxScroll || 30
+    node.addEventListener('drag', handleMouseMove)
+    node.addEventListener('dragend', handleMouseLeave)
   }
 
   update(params)
@@ -34,7 +27,7 @@ export function autoScrollable(node, params = {}) {
 
   function handleMouseMove({ clientY }) {
     const { scrollTop, scrollHeight, clientHeight } = node
-    if (scrollHeight <= clientHeight) {
+    if (scrollHeight <= clientHeight || clientY === 0) {
       return
     }
     cancelAnimationFrame(timeout)
@@ -46,7 +39,8 @@ export function autoScrollable(node, params = {}) {
       scrollTop < scrollHeight - clientHeight
     ) {
       scrollBy =
-        ((clientY - clientHeight + borderDetection) * maxScroll) /
+        ((Math.min(clientY, clientHeight) - clientHeight + borderDetection) *
+          maxScroll) /
         borderDetection
     }
     if (scrollBy) {
diff --git a/renderer/components/PlaylistTracksTable/PlaylistTracksTable.test.js b/renderer/components/PlaylistTracksTable/PlaylistTracksTable.test.js
index 18cd6dcc..73de98ac 100644
--- a/renderer/components/PlaylistTracksTable/PlaylistTracksTable.test.js
+++ b/renderer/components/PlaylistTracksTable/PlaylistTracksTable.test.js
@@ -127,7 +127,7 @@ describe('PlaylistTracksTable component', () => {
     const track = faker.random.arrayElement(playlist.tracks)
     render(html`<${PlaylistTracksTable} playlist=${playlist} />`)
 
-    await fireEvent.click(screen.getByText(track.tags.title))
+    fireEvent.click(screen.getByText(track.tags.title))
     await sleep(300)
 
     expect(add).toHaveBeenCalledWith({ ...track, key: `${track.id}-1` })
@@ -155,15 +155,16 @@ describe('PlaylistTracksTable component', () => {
     const dragged = screen.queryByText(playlist.tracks[0].tags.title)
     const hovered = screen.queryByText(playlist.tracks[2].tags.title)
     const dropped = screen.queryByText(playlist.tracks[3].tags.title)
+    const dataTransfer = { setDragImage: jest.fn() }
 
-    await fireEvent.mouseDown(dragged)
-    await fireEvent.mouseMove(dragged)
-    await fireEvent.mouseEnter(hovered.closest('li'))
-    await fireEvent.mouseEnter(dropped.closest('li'))
-    await fireEvent.mouseUp(dropped)
+    fireEvent.dragStart(dragged, { dataTransfer })
+    fireEvent.dragEnter(dragged, { dataTransfer })
+    fireEvent.dragEnter(hovered.closest('li'), { dataTransfer })
+    fireEvent.dragEnter(dropped.closest('li'), { dataTransfer })
+    fireEvent.dragEnd(dropped, { dataTransfer })
     await sleep()
 
-    expect(moveTrack).toHaveBeenCalledWith(playlist, { from: 0, to: 2 })
+    expect(moveTrack).toHaveBeenCalledWith(playlist, { from: 0, to: 3 })
     expect(moveTrack).toHaveBeenCalledTimes(1)
     expect(add).not.toHaveBeenCalled()
     expect(location.hash).toEqual(`#/`)
@@ -176,13 +177,13 @@ describe('PlaylistTracksTable component', () => {
       track = faker.random.arrayElement(playlist.tracks)
       render(html`<${PlaylistTracksTable} playlist=${playlist} />`)
 
-      await fireEvent.click(
+      fireEvent.click(
         screen.getByText(track.tags.title).closest('tr').querySelector('button')
       )
     })
 
     it('removes track from playlist with dropdown', async () => {
-      await fireEvent.click(screen.getByText(translate('remove from playlist')))
+      fireEvent.click(screen.getByText(translate('remove from playlist')))
       await sleep()
 
       expect(removeTrack).toHaveBeenCalledWith(
@@ -196,7 +197,7 @@ describe('PlaylistTracksTable component', () => {
     })
 
     it('plays track with dropdown', async () => {
-      await fireEvent.click(screen.getByText('play_arrow'))
+      fireEvent.click(screen.getByText('play_arrow'))
       await sleep()
 
       expect(add).toHaveBeenCalledWith({ ...track, key: `${track.id}-1` }, true)
@@ -207,7 +208,7 @@ describe('PlaylistTracksTable component', () => {
     })
 
     it('enqueues track with dropdown', async () => {
-      await fireEvent.click(screen.getByText('playlist_add'))
+      fireEvent.click(screen.getByText('playlist_add'))
       await sleep()
 
       expect(add).toHaveBeenCalledWith({ ...track, key: `${track.id}-1` })
@@ -218,7 +219,7 @@ describe('PlaylistTracksTable component', () => {
     })
 
     it('opens parent folder', async () => {
-      await fireEvent.click(screen.getByText('launch'))
+      fireEvent.click(screen.getByText('launch'))
       await sleep()
 
       expect(electron.shell.showItemInFolder).toHaveBeenCalledWith(track.path)
@@ -229,7 +230,7 @@ describe('PlaylistTracksTable component', () => {
     })
 
     it('opens track details dialogue', async () => {
-      await fireEvent.click(screen.getByText('local_offer'))
+      fireEvent.click(screen.getByText('local_offer'))
       await sleep()
 
       expect(screen.getByText(translate('track details'))).toBeVisible()
diff --git a/renderer/components/PlaylistTracksTable/__snapshots__/PlaylistTracksTable.stories.storyshot b/renderer/components/PlaylistTracksTable/__snapshots__/PlaylistTracksTable.stories.storyshot
index 2735fd9f..cf0d0efb 100644
--- a/renderer/components/PlaylistTracksTable/__snapshots__/PlaylistTracksTable.stories.storyshot
+++ b/renderer/components/PlaylistTracksTable/__snapshots__/PlaylistTracksTable.stories.storyshot
@@ -49,12 +49,10 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
       <tbody
         class="svelte-1nzz15j"
       >
-         
-        <ol
-          class="svelte-c121nq"
-        >
+        <ol>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -157,7 +155,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -260,7 +259,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -363,7 +363,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -466,7 +467,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -569,7 +571,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -672,7 +675,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -775,7 +779,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -878,7 +883,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -981,7 +987,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1084,7 +1091,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1187,7 +1195,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1290,7 +1299,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1393,7 +1403,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1496,7 +1507,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1599,7 +1611,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1702,7 +1715,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
@@ -1805,7 +1819,8 @@ exports[`Storyshots Components/Playlist tracks table Default 1`] = `
              
           </li>
           <li
-            class="svelte-c121nq"
+            class="svelte-w3rzzq"
+            draggable="true"
           >
             <tr
               class="svelte-1nzz15j"
diff --git a/renderer/components/SortableList/SortableList.svelte b/renderer/components/SortableList/SortableList.svelte
index a38f4f36..667f61e2 100644
--- a/renderer/components/SortableList/SortableList.svelte
+++ b/renderer/components/SortableList/SortableList.svelte
@@ -1,14 +1,6 @@
-<script context="module">
-  import { BehaviorSubject } from 'rxjs'
-
-  const isMoveInProgress$ = new BehaviorSubject(false)
-  export const isMoveInProgress = isMoveInProgress$.asObservable()
-</script>
-
 <script>
   import { createEventDispatcher } from 'svelte'
   import { slide } from 'svelte/transition'
-  import { _ } from 'svelte-intl'
 
   export let items = []
 
@@ -16,7 +8,10 @@
   let dragged = null
   let target = null
   let keyedItems = []
-  let possibleDrag = null
+  let previousY = null
+  // there is a bug in Chrome: when drag operation starts, dragenter is always fired on the first target
+  // which makes an ugly "jump" to the beginning of the list
+  let skipFirstEnter = true
 
   $: {
     // ensure items have unique keys: same item could appear multiple times in the list
@@ -29,104 +24,46 @@
     }
   }
 
-  function findPositionned(node) {
-    return !node
-      ? null
-      : node.offsetParent &&
-        getComputedStyle(node.offsetParent).position !== 'static'
-      ? node.offsetParent
-      : findPositionned(node.offsetParent)
-  }
-
-  function handleDrag(evt, key, idx) {
+  function handleDragStart(evt, key, idx) {
     const item = evt.target.closest('li')
-    const bounds = item.parentNode.getBoundingClientRect()
-    const { height, width, left, top } = item.getBoundingClientRect()
-    possibleDrag = {
+    dragged = {
       item,
       key,
-      idx,
-      offset: top - evt.clientY,
-      height,
-      width,
-      left,
-      min: bounds.top,
-      max: bounds.bottom - height,
-      positionned: findPositionned(item)
-    }
-    if (possibleDrag.positionned) {
-      const { left, top } = possibleDrag.positionned.getBoundingClientRect()
-      possibleDrag.left -= left
-      possibleDrag.offset -= top
+      from: idx,
+      indicator: document.createElement('span')
     }
+    skipFirstEnter = true
+    previousY = evt.pageY
+    // this disabled the drag indicator
+    evt.dataTransfer.setDragImage(dragged.indicator, 0, 0)
   }
 
-  function handleOver(evt, key, idx) {
-    if (dragged) {
-      if (target) {
-        target.item.style.marginTop = null
-        target.item.style.marginBottom = null
+  function handleEnter(evt, key) {
+    if (dragged && dragged.key !== key && !skipFirstEnter) {
+      target = { item: evt.target.closest('li'), key }
+      if (previousY > evt.pageY) {
+        target.item.before(dragged.item)
+      } else {
+        target.item.after(dragged.item)
       }
-      target = { item: evt.target.closest('li'), key, idx }
-      target.item.before(dragged.item)
-      target.item.style.marginTop = `${dragged.height}px`
-    }
-  }
-
-  function handleOut() {
-    if (
-      dragged &&
-      target &&
-      target.key === keyedItems[keyedItems.length - 1].key
-    ) {
-      target.idx++
-      target.item.after(dragged.item)
-      target.item.style.marginTop = null
-      target.item.style.marginBottom = `${dragged.height}px`
-    }
-  }
-
-  function handleMove(evt) {
-    if (possibleDrag) {
-      dragged = possibleDrag
-      dragged.item.style.left = `${dragged.left}px`
-      dragged.item.style.height = `${dragged.height}px`
-      dragged.item.style.width = `${dragged.width}px`
-      possibleDrag = null
-      handleOver(evt, dragged.key, dragged.idx)
-      isMoveInProgress$.next(true)
-    }
-    if (dragged) {
-      const value =
-        evt.clientY +
-        dragged.offset +
-        (dragged.positionned ? dragged.positionned.scrollTop : 0)
-      dragged.item.style.top = `${
-        value < dragged.min
-          ? dragged.min
-          : value > dragged.max
-          ? dragged.max
-          : value
-      }px`
+      previousY = evt.pageY
     }
+    skipFirstEnter = false
   }
 
   function handleDrop() {
-    if (target) {
-      target.item.style.marginTop = null
-      target.item.style.marginBottom = null
-    }
     if (dragged && target) {
-      const from = dragged.idx
-      const to = target.idx - (from < target.idx ? 1 : 0)
+      const { from, item } = dragged
+      const to = Array.from(item.parentElement.children).indexOf(item)
       if (from !== to) {
         dispatch('move', { from, to })
       }
     }
-    possibleDrag = null
+    if (dragged) {
+      dragged.indicator.remove()
+    }
     dragged = null
     target = null
-    isMoveInProgress$.next(false)
   }
 
   function slideOnRemove(...args) {
@@ -137,28 +74,32 @@
 <style type="postcss">
   li {
     transition: margin-top 150ms linear, margin-bottom 150ms linear;
-  }
 
-  li.dragged {
-    @apply absolute inline-block pointer-events-none;
-    background: var(--hover-bg-color);
-    transition: top 150ms linear;
+    &.dragged {
+      background-color: var(--hover-bg-color);
+    }
   }
 
-  ol.dragged {
-    @apply cursor-move;
-  }
+  /* 
+  During DnD, the first li is always hover, and we need to disable the rule
+  But at the end of DnD, the item at the index of dragged element will be hovered, 
+  until the mouse moved. There is no workaround.
+
+  ol:not(.dragged) > li:hover {
+    background-color: var(--hover-primary-color);
+  } 
+  */
 </style>
 
-<svelte:body on:mousemove={handleMove} on:mouseup={handleDrop} />
-<ol on:mouseleave={handleOut} class:dragged>
+<ol class:dragged>
   {#each keyedItems as item, i (item.key)}
     <li
-      out:slideOnRemove|local={{ duration: 250 }}
+      draggable="true"
       class:dragged={dragged && dragged.key === item.key}
-      class:target={target && target.key === item.key}
-      on:mousedown={evt => handleDrag(evt, item.key, i)}
-      on:mouseenter={evt => handleOver(evt, item.key, i)}>
+      out:slideOnRemove|local={{ duration: 250 }}
+      on:dragstart={evt => handleDragStart(evt, item.key, i)}
+      on:dragenter={evt => handleEnter(evt, item.key)}
+      on:dragend={handleDrop}>
       <slot name="item" {item} {i} />
     </li>
   {/each}
diff --git a/renderer/components/SortableList/SortableList.test.js b/renderer/components/SortableList/SortableList.test.js
index 34573ed8..e0986521 100644
--- a/renderer/components/SortableList/SortableList.test.js
+++ b/renderer/components/SortableList/SortableList.test.js
@@ -1,10 +1,8 @@
 'use strict'
 
 import { screen, render, fireEvent } from '@testing-library/svelte'
-import { get } from 'svelte/store'
 import html from 'svelte-htm'
 import faker from 'faker'
-import { isMoveInProgress } from './SortableList.svelte'
 import SortableList from './SortableList.stories.svelte'
 import { addRefs } from '../../tests'
 
@@ -79,6 +77,18 @@ describe('SortableList component', () => {
     ].map(addRefs)
 
     const onMove = jest.fn()
+    const dataTransfer = { setDragImage: jest.fn() }
+    let pageY
+
+    beforeAll(() => {
+      // JSDom does not support setting pageY, we have do do it ourselve
+      Object.defineProperty(Event.prototype, 'pageY', {
+        enumerable: true,
+        get() {
+          return pageY
+        }
+      })
+    })
 
     beforeEach(async () => {
       render(
@@ -89,58 +99,48 @@ describe('SortableList component', () => {
     })
 
     it('drags track forward in the list', async () => {
-      expect(get(isMoveInProgress)).toBe(false)
       const dragged = screen.queryByText(items[1].tags.title)
       const hovered = screen.queryByText(items[2].tags.title)
       const dropped = screen.queryByText(items[3].tags.title)
 
-      await fireEvent.mouseDown(dragged)
-      await fireEvent.mouseMove(dragged)
-      expect(get(isMoveInProgress)).toBe(true)
-      await fireEvent.mouseEnter(hovered.closest('li'))
-      await fireEvent.mouseEnter(dropped.closest('li'))
-      await fireEvent.mouseUp(dropped)
+      fireEvent.dragStart(dragged, { dataTransfer })
+      fireEvent.dragEnter(dragged, { dataTransfer })
+      fireEvent.dragEnter(hovered.closest('li'), { dataTransfer })
+      fireEvent.dragEnter(dropped.closest('li'), { dataTransfer })
+      fireEvent.dragEnd(dropped, { dataTransfer })
 
-      expect(get(isMoveInProgress)).toBe(false)
       expect(onMove).toHaveBeenCalledWith(
-        expect.objectContaining({ detail: { from: 1, to: 2 } })
+        expect.objectContaining({ detail: { from: 1, to: 3 } })
       )
       expect(onMove).toHaveBeenCalledTimes(1)
     })
 
     it('drags track backward in the list', async () => {
-      expect(get(isMoveInProgress)).toBe(false)
       const dragged = screen.queryByText(items[3].tags.title)
       const hovered = screen.queryByText(items[2].tags.title)
       const dropped = screen.queryByText(items[1].tags.title)
 
-      await fireEvent.mouseDown(dragged)
-      await fireEvent.mouseMove(dragged)
-      expect(get(isMoveInProgress)).toBe(true)
-      await fireEvent.mouseEnter(hovered.closest('li'))
-      await fireEvent.mouseEnter(dropped.closest('li'))
-      await fireEvent.mouseUp(dropped)
+      fireEvent.dragStart(dragged, { dataTransfer })
+      fireEvent.dragEnter(dragged, { dataTransfer })
+      fireEvent.dragEnter(hovered.closest('li'), { dataTransfer })
+      fireEvent.dragEnter(dropped.closest('li'), { dataTransfer })
+      fireEvent.dragEnd(dropped, { dataTransfer })
 
-      expect(get(isMoveInProgress)).toBe(false)
       expect(onMove).toHaveBeenCalledWith(
-        expect.objectContaining({ detail: { from: 3, to: 1 } })
+        expect.objectContaining({ detail: { from: 3, to: 2 } })
       )
       expect(onMove).toHaveBeenCalledTimes(1)
     })
 
     it('drags track at the very end', async () => {
-      expect(get(isMoveInProgress)).toBe(false)
       const dragged = screen.queryByText(items[0].tags.title)
       const hovered = screen.queryByText(items[4].tags.title)
 
-      await fireEvent.mouseDown(dragged)
-      await fireEvent.mouseMove(dragged)
-      expect(get(isMoveInProgress)).toBe(true)
-      await fireEvent.mouseEnter(hovered.closest('li'))
-      await fireEvent.mouseLeave(hovered.closest('ol'))
-      await fireEvent.mouseUp(dragged)
+      fireEvent.dragStart(dragged, { dataTransfer })
+      fireEvent.dragEnter(dragged, { dataTransfer })
+      fireEvent.dragEnter(hovered.closest('li'), { dataTransfer })
+      fireEvent.dragEnd(dragged, { dataTransfer })
 
-      expect(get(isMoveInProgress)).toBe(false)
       expect(onMove).toHaveBeenCalledWith(
         expect.objectContaining({ detail: { from: 0, to: 4 } })
       )
@@ -148,18 +148,17 @@ describe('SortableList component', () => {
     })
 
     it('drags track at the very beginning', async () => {
-      expect(get(isMoveInProgress)).toBe(false)
       const dragged = screen.queryByText(items[1].tags.title)
       const hovered = screen.queryByText(items[0].tags.title)
 
-      await fireEvent.mouseDown(dragged)
-      await fireEvent.mouseMove(dragged)
-      expect(get(isMoveInProgress)).toBe(true)
-      await fireEvent.mouseEnter(hovered.closest('li'))
-      await fireEvent.mouseLeave(hovered.closest('ol'))
-      await fireEvent.mouseUp(dragged)
+      pageY = 10
+      fireEvent.dragStart(dragged, { dataTransfer })
+      pageY = 10
+      fireEvent.dragEnter(dragged, { dataTransfer })
+      pageY = 0
+      fireEvent.dragEnter(hovered.closest('li'), { dataTransfer })
+      fireEvent.dragEnd(dragged, { dataTransfer })
 
-      expect(get(isMoveInProgress)).toBe(false)
       expect(onMove).toHaveBeenCalledWith(
         expect.objectContaining({ detail: { from: 1, to: 0 } })
       )
@@ -167,28 +166,23 @@ describe('SortableList component', () => {
     })
 
     it(`does not move track on cancelled drag'n drop`, async () => {
-      expect(get(isMoveInProgress)).toBe(false)
       const dropped = screen.queryByTestId('paragraph')
       const dragged = screen.queryByText(items[2].tags.title)
 
-      await fireEvent.mouseDown(dragged)
-      await fireEvent.mouseMove(dragged)
-      expect(get(isMoveInProgress)).toBe(true)
-      await fireEvent.mouseEnter(dropped)
-      await fireEvent.mouseUp(dropped)
+      fireEvent.dragStart(dragged, { dataTransfer })
+      fireEvent.dragEnter(dragged, { dataTransfer })
+      fireEvent.dragEnter(dropped, { dataTransfer })
+      fireEvent.dragEnd(dropped, { dataTransfer })
 
-      expect(get(isMoveInProgress)).toBe(false)
       expect(onMove).not.toHaveBeenCalled()
     })
 
     it(`does not move track on click`, async () => {
       const dragged = screen.queryByText(items[2].tags.title)
 
-      await fireEvent.mouseDown(dragged)
-      expect(get(isMoveInProgress)).toBe(false)
-      await fireEvent.mouseUp(dragged)
+      fireEvent.mouseDown(dragged)
+      fireEvent.mouseUp(dragged)
 
-      expect(get(isMoveInProgress)).toBe(false)
       expect(onMove).not.toHaveBeenCalled()
     })
   })
diff --git a/renderer/components/SortableList/__snapshots__/SortableList.stories.storyshot b/renderer/components/SortableList/__snapshots__/SortableList.stories.storyshot
index 5bd81ad5..28f4276d 100644
--- a/renderer/components/SortableList/__snapshots__/SortableList.stories.storyshot
+++ b/renderer/components/SortableList/__snapshots__/SortableList.stories.storyshot
@@ -5,12 +5,10 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
   class="storybook-snapshot-container"
 >
   <div>
-     
-    <ol
-      class="svelte-c121nq"
-    >
+    <ol>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
@@ -76,7 +74,8 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
          
       </li>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
@@ -142,7 +141,8 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
          
       </li>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
@@ -208,7 +208,8 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
          
       </li>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
@@ -274,7 +275,8 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
          
       </li>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
@@ -340,7 +342,8 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
          
       </li>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
@@ -406,7 +409,8 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
          
       </li>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
@@ -472,7 +476,8 @@ exports[`Storyshots Components/Sortable list Default 1`] = `
          
       </li>
       <li
-        class="svelte-c121nq"
+        class="svelte-w3rzzq"
+        draggable="true"
       >
         <div
           class="svelte-1hrmi6p"
diff --git a/renderer/components/TracksQueue/TracksQueue.test.js b/renderer/components/TracksQueue/TracksQueue.test.js
index 4fc203ea..b2474f5d 100644
--- a/renderer/components/TracksQueue/TracksQueue.test.js
+++ b/renderer/components/TracksQueue/TracksQueue.test.js
@@ -72,12 +72,12 @@ describe('TracksQueue component', () => {
     it('jumps to track on click', async () => {
       expect(get(index)).toEqual(0)
 
-      await fireEvent.click(screen.getByText(tracks[2].tags.title))
+      fireEvent.click(screen.getByText(tracks[2].tags.title))
       await tick()
 
       expect(get(index)).toEqual(2)
 
-      await fireEvent.click(screen.getByText(tracks[1].tags.title))
+      fireEvent.click(screen.getByText(tracks[1].tags.title))
       await tick()
 
       expect(get(index)).toEqual(1)
@@ -87,7 +87,7 @@ describe('TracksQueue component', () => {
       expectListItems(tracks)
       expect(get(current)).toEqual(tracks[0])
 
-      await fireEvent.click(screen.queryByText('delete'))
+      fireEvent.click(screen.queryByText('delete'))
       await sleep(300)
 
       expect(get(current)).not.toBeDefined()
@@ -98,7 +98,7 @@ describe('TracksQueue component', () => {
       expectListItems(tracks)
 
       const removed = tracks[1].tags.title
-      await fireEvent.click(
+      fireEvent.click(
         screen.getByText(removed).closest('li').querySelector('button')
       )
       await sleep(300)
@@ -113,15 +113,16 @@ describe('TracksQueue component', () => {
       const dragged = screen.queryByText(tracks[0].tags.title)
       const hovered = screen.queryByText(tracks[2].tags.title)
       const dropped = screen.queryByText(tracks[3].tags.title)
+      const dataTransfer = { setDragImage: jest.fn() }
 
-      await fireEvent.mouseDown(dragged)
-      await fireEvent.mouseMove(dragged)
-      await fireEvent.mouseEnter(hovered.closest('li'))
-      await fireEvent.mouseEnter(dropped.closest('li'))
-      await fireEvent.mouseUp(dropped)
+      fireEvent.dragStart(dragged, { dataTransfer })
+      fireEvent.dragEnter(dragged, { dataTransfer })
+      fireEvent.dragEnter(hovered.closest('li'), { dataTransfer })
+      fireEvent.dragEnter(dropped.closest('li'), { dataTransfer })
+      fireEvent.dragEnd(dropped, { dataTransfer })
       await tick()
 
-      expectListItems([tracks[1], tracks[2], tracks[0], tracks[3]])
+      expectListItems([tracks[1], tracks[2], tracks[3], tracks[0]])
     })
   })
 
@@ -151,7 +152,7 @@ describe('TracksQueue component', () => {
       expectListItems(tracks.slice(0, 2))
       expect(get(current)).toEqual(tracks[0])
 
-      await fireEvent.click(screen.queryByText('delete'))
+      fireEvent.click(screen.queryByText('delete'))
       await sleep(300)
 
       expectListItems(tracks.slice(0, 2))
@@ -167,7 +168,7 @@ describe('TracksQueue component', () => {
       expectListItems(tracks.slice(0, 2))
       expect(get(current)).toEqual(tracks[0])
 
-      await fireEvent.click(
+      fireEvent.click(
         screen
           .getByText(tracks[0].tags.title)
           .closest('li')
@@ -178,7 +179,7 @@ describe('TracksQueue component', () => {
       expectListItems(tracks.slice(1, 2))
       expect(get(current)).toEqual(tracks[1])
 
-      await fireEvent.click(
+      fireEvent.click(
         screen
           .getByText(tracks[1].tags.title)
           .closest('li')
@@ -230,8 +231,9 @@ describe('TracksQueue component', () => {
     it('adds entire queue to existing playlist', async () => {
       const playlist = faker.random.arrayElement(playlists)
 
-      await fireEvent.click(screen.queryByText('library_add'))
-      await fireEvent.click(screen.queryByText(playlist.name))
+      fireEvent.click(screen.queryByText('library_add'))
+      await sleep()
+      fireEvent.click(screen.queryByText(playlist.name))
       await sleep(250)
 
       expectListItems(tracks)
diff --git a/renderer/components/TracksQueue/__snapshots__/TracksQueue.stories.storyshot b/renderer/components/TracksQueue/__snapshots__/TracksQueue.stories.storyshot
index c845b22e..06f3bd34 100644
--- a/renderer/components/TracksQueue/__snapshots__/TracksQueue.stories.storyshot
+++ b/renderer/components/TracksQueue/__snapshots__/TracksQueue.stories.storyshot
@@ -28,10 +28,7 @@ exports[`Storyshots Components/Tracks queue Empty 1`] = `
     <div
       class="svelte-1bbcl7z"
     >
-       
-      <ol
-        class="svelte-c121nq"
-      />
+      <ol />
     </div>
   </div>
 </section>
@@ -102,12 +99,10 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
     <div
       class="svelte-1bbcl7z"
     >
-       
-      <ol
-        class="svelte-c121nq"
-      >
+      <ol>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
@@ -174,7 +169,8 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
            
         </li>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
@@ -241,7 +237,8 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
            
         </li>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
@@ -308,7 +305,8 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
            
         </li>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
@@ -375,7 +373,8 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
            
         </li>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
@@ -442,7 +441,8 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
            
         </li>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
@@ -509,7 +509,8 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
            
         </li>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
@@ -576,7 +577,8 @@ exports[`Storyshots Components/Tracks queue With Track List 1`] = `
            
         </li>
         <li
-          class="svelte-c121nq"
+          class="svelte-w3rzzq"
+          draggable="true"
         >
           <span
             slot="item"
diff --git a/renderer/components/index.js b/renderer/components/index.js
index cfcd4880..c67b8ffe 100644
--- a/renderer/components/index.js
+++ b/renderer/components/index.js
@@ -23,7 +23,6 @@ export { default as Sheet } from './Sheet/Sheet.svelte'
 export { default as Slider } from './Slider/Slider.svelte'
 export { default as Snackbar } from './Snackbar/Snackbar.svelte'
 export { default as SortableList } from './SortableList/SortableList.svelte'
-export * as SortableListConstants from './SortableList/SortableList.svelte'
 export { default as SubHeading } from './SubHeading/SubHeading.svelte'
 export { default as SystemNotifier } from './SystemNotifier/SystemNotifier.svelte'
 export { default as TextInput } from './TextInput/TextInput.svelte'