draggable development

package.json

@@ -47,7 +47,8 @@
         "vue-flatpickr-component": "^8.1.3",
         "vue-router": "^3.1.3",
         "vue2-editor": "^2.10.3",
-        "vue2-transitions": "^0.3.0"
+        "vue2-transitions": "^0.3.0",
+        "vuedraggable": "^2.24.3"
     },
     "devDependencies": {
         "@babel/core": "^7.15.5",

resources/assets/js/mixins/global.js

@@ -25,7 +25,6 @@ import AkauntingSwitch from './../components/AkauntingSwitch';
 import AkauntingSlider from './../components/AkauntingSlider';
 import AkauntingColor from './../components/AkauntingColor';
 import CardForm from './../components/CreditCard/CardForm';
-
 import NProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 import NProgressAxios from './../plugins/nprogress-axios';

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

@@ -14,6 +14,7 @@ import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
 import BulkAction from './../../plugins/bulk-action';
+import draggable from 'vuedraggable';
 
 // plugin setup
 Vue.use(DashboardPlugin);
@@ -25,6 +26,10 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        draggable
+    },
+
     data: function () {
         return {
             form: new Form('document'),
@@ -77,6 +82,7 @@ const app = new Vue({
             ],
             email_template: false,
             send_to: false,
+            drag: false
         }
     },
 
@@ -111,6 +117,26 @@ const app = new Vue({
     },
 
     methods: {
+        checkMove(event) {
+            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) {
+            debugger;
+        },
+
         onRefFocus(ref) {
             let index = this.form.items.length - 1;
             

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

@@ -19,7 +19,12 @@
                 <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>
                                 <span class="w-6 material-icons">list</span>
+                                 <div v-html="index"></div>
+                            </div>
+                        </draggable>
                     </td>
                     @stack('move_td_end')
 
@@ -27,7 +32,6 @@
 
                     @if (! $hideItems || (! $hideItemName && ! $hideItemDescription))
                         @stack('name_td_start')
-
                         <td class="px-3 py-3 ltr:pl-2 rtl:pr-2 ltr:text-left rtl:text-right align-middle border-b-0 name">
                             @if (! $hideItemName)
                                 <span class="flex items-center text-sm" tabindex="0" v-if="row.item_id">