playlist editor draft

assets/src/components/AList.vue

@@ -1,19 +1,22 @@
 <template>
     <div>
+        <!-- FIXME: header and footer should be inside list tags -->
         <slot name="header"></slot>
-        <ul :class="listClass">
+        <component :is="listTag" :class="listClass">
             <template v-for="(item,index) in items" :key="index">
-                <li :class="itemClass" @click="select(index)">
+                <component :is="itemTag" :class="itemClass" @click="select(index)"
+                        :draggable="orderable"
+                        @dragstart="onDragStart" @dragover="onDragOver" @drop="onDrop">
                     <slot name="item" :selected="index == selectedIndex" :set="set" :index="index" :item="item"></slot>
-                </li>
+                </component>
             </template>
-        </ul>
+        </component>
         <slot name="footer"></slot>
     </div>
 </template>
 <script>
 export default {
-    emits: ['select', 'unselect'],
+    emits: ['select', 'unselect', 'move'],
     data() {
         return {
             selectedIndex: this.defaultIndex,
@@ -25,6 +28,9 @@ export default {
         itemClass: String,
         defaultIndex: { type: Number, default: -1},
         set: Object,
+        orderable: { type: Boolean, default: false },
+        itemTag: { default: 'li' },
+        listTag: { default: 'ul' },
     },
 
     computed: {
@@ -61,6 +67,34 @@ export default {
             this.$emit('unselect', { item: this.selected, index: this.selectedIndex});
             this.selectedIndex = -1;
         },
+
+        onDragStart(ev) {
+            const dataset = ev.target.dataset;
+            const data = `cell:${dataset.index}`
+            ev.dataTransfer.setData("text/cell", data)
+            ev.dataTransfer.dropEffect = 'move'
+        },
+
+        onDragOver(ev) {
+            ev.preventDefault()
+            ev.dataTransfer.dropEffect = 'move'
+        },
+
+        onDrop(ev) {
+            const data = ev.dataTransfer.getData("text/cell")
+            if(!data || !data.startsWith('cell:'))
+                return
+
+            ev.preventDefault()
+            const from = Number(data.slice(5))
+            const target = ev.target.tagName == this.itemTag ? ev.target
+                                : ev.target.closest(this.itemTag)
+            this.$emit('move', {
+                from, target,
+                to: Number(target.dataset.index),
+                set: this.set,
+            })
+        },
     },
 }
 </script>