code refactoring

resources/assets/js/views/common/documents.js

@@ -117,24 +117,14 @@ const app = new Vue({
     },
 
     methods: {
-        checkMove(event) {
+        onEnd() {
-            debugger;
-        },
-
-        onStart(event) {
-            debugger;
-        },
-
-        onEnd(event, index) {
             this.drag = false;
-            
-            let element = this.items[index];
-            this.items.splice(index, 1);
-            this.items.splice(event.newIndex, 0, element);
         },
 
-        log(event) {
+        onUpdate(event) {
-            debugger;
+            let fromIndex = this.form.items.indexOf(this.form.items[event.oldIndex]);
+            let element = this.form.items.splice(fromIndex, 1)[0];
+            this.form.items.splice(event.newIndex, 0, element);  
         },
 
         onRefFocus(ref) {

resources/views/components/documents/form/line-item.blade.php

@@ -1,4 +1,5 @@
-<tr v-for="(row, index) in items" :index="index">
+<tbody is="draggable" tag="tbody" handle=".handle" @start="drag = true" @end="drag = false" @update="onUpdate">
+    <tr v-for="(row, index) in items" :index="index">
         @stack('name_td_start')
 
         <td class="border-r-0 border-b-0 p-0"
@@ -19,12 +20,9 @@
                     <tr>
                         @stack('move_td_start')
                         <td class="align-middle border-b-0 flex items-center justify-center" style="width:24px; height:100px; color: #8898aa;">
-                        <draggable @change="log" @start="drag = true" @end="onEnd($event, index)" ghost-class="ghost-card">
+                            <div class="handle mt-2 hidden lg:block cursor-move">
-                            <div>
                                 <span class="w-6 material-icons">list</span>
-                                 <div v-html="index"></div>
                             </div>
-                        </draggable>
                         </td>
                         @stack('move_td_end')
 
@@ -428,4 +426,5 @@
         </td>
 
         @stack('name_td_end')
-</tr>
+    </tr>
+</tbody>