diff --git a/package-lock.json b/package-lock.json
index 6f350ba12..a955d32b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,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",
@@ -23415,6 +23416,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+            "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+        },
         "node_modules/source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -25861,6 +25867,14 @@
             "resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
             "integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
         },
+        "node_modules/vuedraggable": {
+            "version": "2.24.3",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+            "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+            "dependencies": {
+                "sortablejs": "1.10.2"
+            }
+        },
         "node_modules/watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -46042,6 +46056,11 @@
                 "is-plain-obj": "^1.0.0"
             }
         },
+        "sortablejs": {
+            "version": "1.10.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
+            "integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
+        },
         "source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -47994,6 +48013,14 @@
             "resolved": "https://registry.npmjs.org/vue2-transitions/-/vue2-transitions-0.3.0.tgz",
             "integrity": "sha512-m1ad8K8kufqiEhj5gXHkkqOioI5sW0FaMbRiO0Tv2WFfGbO2eIKrfkFiO3HPQtMJboimaLCN4p/zL81clLbG4w=="
         },
+        "vuedraggable": {
+            "version": "2.24.3",
+            "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.24.3.tgz",
+            "integrity": "sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==",
+            "requires": {
+                "sortablejs": "1.10.2"
+            }
+        },
         "watchpack": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/resources/assets/js/mixins/global.js b/resources/assets/js/mixins/global.js
index cc6a9f8fc..c76a5c81e 100644
--- a/resources/assets/js/mixins/global.js
+++ b/resources/assets/js/mixins/global.js
@@ -25,6 +25,7 @@ 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';
diff --git a/resources/assets/js/views/common/documents.js b/resources/assets/js/views/common/documents.js
index fbd41d21c..c3cfb1fd8 100644
--- a/resources/assets/js/views/common/documents.js
+++ b/resources/assets/js/views/common/documents.js
@@ -118,7 +118,7 @@ const app = new Vue({
 
     methods: {
         onEnd() {
-            this.drag = false;
+            this.dragging = false;
         },
 
         onUpdate(event) {
diff --git a/resources/views/components/documents/form/line-item.blade.php b/resources/views/components/documents/form/line-item.blade.php
index 0eb0cc234..1c57e1b9b 100644
--- a/resources/views/components/documents/form/line-item.blade.php
+++ b/resources/views/components/documents/form/line-item.blade.php
@@ -1,4 +1,4 @@
-<tbody is="draggable" tag="tbody" handle=".handle" @start="drag = true" @end="drag = false" @update="onUpdate">
+<tbody is="draggable" tag="tbody" handle=".handle" @start="dragging = true" @end="dragging = false" @update="onUpdate">
     <tr v-for="(row, index) in items" :index="index">
         @stack('name_td_start')