diff --git a/MAPS_Web/dist/frappe-gantt.js b/MAPS_Web/dist/frappe-gantt.js
index 2cec404..fbcc885 100644
--- a/MAPS_Web/dist/frappe-gantt.js
+++ b/MAPS_Web/dist/frappe-gantt.js
@@ -543,7 +543,6 @@ var Gantt = (function () {
         }
     
         draw() {
-            this.draw_number();
             this.draw_bar();
             this.draw_progress_bar();
             this.draw_label();
@@ -597,17 +596,6 @@ var Gantt = (function () {
             requestAnimationFrame(() => this.update_label_position());
         }
     
-        // Add grid line number
-        draw_number() {
-            createSVG('text', {
-                x: 15,
-                y: this.y + this.height / 2,
-                innerHTML: this.task.id,
-                class: 'process-num',
-                append_to: this.bar_group
-            });
-        }
-    
         draw_resize_handles() {
             if (this.invalid) return;
     
@@ -735,7 +723,7 @@ var Gantt = (function () {
             });
         }
     
-        update_bar_position({ x = null, width = null }) {
+        update_bar_position({ x = null, width = null, y = null }) {
 
             const bar = this.$bar;
             const bar_progress = this.$bar_progress;
@@ -813,6 +801,15 @@ var Gantt = (function () {
                 // add arrow position
                 this.update_arrow_position();
             }
+
+            if (y) {
+                this.update_attr(bar, 'y', y);
+                this.update_progressbar_position();
+                // add label position
+                this.update_label_position();
+                // add arrow position
+                this.update_arrow_position();
+            }
     
             // this.update_label_position();
             this.update_handle_position();
@@ -944,6 +941,7 @@ var Gantt = (function () {
     
         update_progressbar_position() {
             this.$bar_progress.setAttribute('x', this.$bar.getX());
+            this.$bar_progress.setAttribute('y', this.$bar.getY());
             this.$bar_progress.setAttribute(
                 'width',
                 this.$bar.getWidth() * (this.task.progress / 100)
@@ -961,6 +959,7 @@ var Gantt = (function () {
                 label.classList.remove('big');
                 label.setAttribute('x', bar.getX() + bar.getWidth() / 2);
             }
+            label.setAttribute('y', bar.getY() + bar.getHeight() / 2);
         }
     
         update_handle_position() {
@@ -968,9 +967,15 @@ var Gantt = (function () {
             this.handle_group
                 .querySelector('.handle.left')
                 .setAttribute('x', bar.getX() + 1);
+            this.handle_group
+                .querySelector('.handle.left')
+                .setAttribute('y', bar.getY() + 1);
             this.handle_group
                 .querySelector('.handle.right')
                 .setAttribute('x', bar.getEndX() - 9);
+            this.handle_group
+                .querySelector('.handle.right')
+                .setAttribute('y', bar.getY() + 1);
             const handle = this.group.querySelector('.handle.progress');
             handle &&
                 handle.setAttribute('points', this.get_progress_polygon_points());
@@ -1007,22 +1012,25 @@ var Gantt = (function () {
             }
     
             const start_y =
-                this.gantt.options.header_height +
-                this.gantt.options.bar_height +
-                (this.gantt.options.padding + this.gantt.options.bar_height) *
-                    this.from_task.task._index +
-                this.gantt.options.padding;
+                // this.gantt.options.header_height +
+                // this.gantt.options.bar_height +
+                // (this.gantt.options.padding + this.gantt.options.bar_height) *
+                //     this.from_task.task._index +
+                // this.gantt.options.padding;
+                this.from_task.$bar.getY() + this.gantt.options.bar_height;
     
             const end_x = this.to_task.$bar.getX() - this.gantt.options.padding / 2;
             const end_y =
-                this.gantt.options.header_height +
-                this.gantt.options.bar_height / 2 +
-                (this.gantt.options.padding + this.gantt.options.bar_height) *
-                    this.to_task.task._index +
-                this.gantt.options.padding;
+                // this.gantt.options.header_height +
+                // this.gantt.options.bar_height / 2 +
+                // (this.gantt.options.padding + this.gantt.options.bar_height) *
+                //     this.to_task.task._index +
+                // this.gantt.options.padding;
+                this.to_task.$bar.getY() + this.gantt.options.bar_height/2;
     
             const from_is_below_to =
-                this.from_task.task._index > this.to_task.task._index;
+                // this.from_task.task._index > this.to_task.task._index;
+                this.from_task.$bar.getY() > this.to_task.$bar.getY();
             const curve = this.gantt.options.arrow_curve;
             const clockwise = from_is_below_to ? 1 : 0;
             const curve_y = from_is_below_to ? -curve : curve;
@@ -1229,7 +1237,8 @@ var Gantt = (function () {
                 popup_trigger: 'click',
                 custom_popup_html: null,
                 language: 'en',
-                start_date: 'None'
+                start_date: 'None',
+                sortable: true,
             };
             this.options = Object.assign({}, default_options, options);
         }
@@ -1249,6 +1258,10 @@ var Gantt = (function () {
     
                 // cache index
                 task._index = i;
+
+                if (typeof task.machine_index === 'number') {
+                    task._index = task.machine_index;
+                }
     
                 // invalid dates
                 if (!task.start && !task.end) {
@@ -1452,6 +1465,7 @@ var Gantt = (function () {
             this.make_grid_header();
             this.make_grid_ticks();
             this.make_grid_highlights();
+            this.make_grid_row_number();
         }
     
         make_grid_background() {
@@ -1537,6 +1551,27 @@ var Gantt = (function () {
                 id: 'score'
             });
         }
+
+        // Add line number
+        make_grid_row_number() {
+            const rows_layer = createSVG('g', { append_to: this.layers.grid });
+            const row_height = this.options.bar_height + this.options.padding;
+            let row_y = this.options.header_height + this.options.padding
+
+            var count = 1
+            for (let task of this.tasks) {
+                const line_number = createSVG('text', {
+                    x: 15,
+                    y: row_y*0.6 + count * row_height,
+                    class: 'process-num',
+                    append_to: rows_layer
+                })
+
+                line_number.textContent = count;
+
+                count = count + 1;
+            }
+        }
     
         update_score() {
             var tardiness = tasks.map(otask => {
@@ -1893,6 +1928,26 @@ var Gantt = (function () {
                 }
             );
         }
+
+        sort_bars() {
+            const changed_bars = [];
+            if (!this.bars) {
+                return changed_bars;
+            }
+            this.bars = this.bars.sort((b0, b1) => {
+                return b0.$bar.getY() - b1.$bar.getY();
+            });
+    
+            this.tasks = this.bars.map((b, i) => {
+                const task = b.task;
+                if (task._index !== i) {
+                    changed_bars.push(b);
+                }
+                task._index = i;
+                return task;
+            });
+            return changed_bars;
+        }
     
         bind_bar_events() {
             let is_dragging = false;
@@ -1903,6 +1958,13 @@ var Gantt = (function () {
             let parent_bar_id = null;
             let bars = []; // instanceof Bar
             this.bar_being_dragged = null;
+
+            const min_y = this.options.header_height;
+            const max_y =
+                this.options.header_height +
+                this.tasks.length *
+                    (this.options.bar_height + this.options.padding);
+            this.bar_being_dragged = null; // instanceof dragged bar
     
             function action_in_progress() {
                 return is_dragging || is_resizing_left || is_resizing_right;
@@ -1931,16 +1993,22 @@ var Gantt = (function () {
                     parent_bar_id,
                     ...this.get_all_dependent_tasks(parent_bar_id)
                 ];
-                bars = ids.map(id => this.get_bar(id));
+                // bars = ids.map(id => this.get_bar(id));
     
-                this.bar_being_dragged = parent_bar_id;
+                // this.bar_being_dragged = parent_bar_id;
     
-                bars.forEach(bar => {
+                bars = ids.map((id) => {
+                    const bar = this.get_bar(id);
+                    if (parent_bar_id === id) {
+                        this.bar_being_dragged = bar;
+                    }
                     const $bar = bar.$bar;
                     $bar.ox = $bar.getX();
                     $bar.oy = $bar.getY();
                     $bar.owidth = $bar.getWidth();
                     $bar.finaldx = 0;
+                    $bar.finaldy = 0;
+                    return bar;
                 });
                 bars.forEach(bar => {
                     const $bar = bar.$bar;
@@ -1955,32 +2023,88 @@ var Gantt = (function () {
                 if (!action_in_progress()) return;
                 const dx = e.offsetX - x_on_start;
                 const dy = e.offsetY - y_on_start;
+
+                this.hide_popup();
+
+                // update the dragged bar
+                const bar_being_dragged = this.bar_being_dragged;
+                bar_being_dragged.$bar.finaldx = this.get_snap_position(dx);
+                if (is_resizing_left) {
+                    bar_being_dragged.update_bar_position({
+                        x:
+                            bar_being_dragged.$bar.ox +
+                            bar_being_dragged.$bar.finaldx,
+                        width:
+                            bar_being_dragged.$bar.owidth -
+                            bar_being_dragged.$bar.finaldx,
+                    });
+                } else if (is_resizing_right) {
+                    bar_being_dragged.update_bar_position({
+                        width:
+                            bar_being_dragged.$bar.owidth +
+                            bar_being_dragged.$bar.finaldx,
+                    });
+                } else if (is_dragging) {
+                    let y = bar_being_dragged.$bar.oy + dy;
+                    if (y < min_y) {
+                        y = min_y;
+                    } else if (y > max_y) {
+                        y = max_y;
+                    }
+                    bar_being_dragged.update_bar_position({
+                        x:
+                            bar_being_dragged.$bar.ox +
+                            bar_being_dragged.$bar.finaldx,
+                        y: this.options.sortable ? y : null,
+                    });
+                }
     
                 bars.forEach(bar => {
+                    if (bar.task.id === parent_bar_id) {
+                        return;
+                    }
+
                     const $bar = bar.$bar;
                     $bar.finaldx = this.get_snap_position(dx);
     
                     if (is_resizing_left) {
-                        if (parent_bar_id === bar.task.id) {
-                            bar.update_bar_position({
-                                x: $bar.ox + $bar.finaldx,
-                                width: $bar.owidth - $bar.finaldx
-                            });
-                        } else {
-                            bar.update_bar_position({
+                        // if (parent_bar_id === bar.task.id) {
+                        //     bar.update_bar_position_width({
+                        //         x: $bar.ox + $bar.finaldx,
+                        //         width: $bar.owidth - $bar.finaldx
+                        //     });
+                        // } else {
+                            bar.update_bar_position_width({
                                 x: $bar.ox + $bar.finaldx
                             });
-                        }
+                        // }
                     } else if (is_resizing_right) {
-                        if (parent_bar_id === bar.task.id) {
-                            bar.update_bar_position({
-                                width: $bar.owidth + $bar.finaldx
-                            });
-                        }
+                        // if (parent_bar_id === bar.task.id) {
+                        //     bar.update_bar_position_width({
+                        //         width: $bar.owidth + $bar.finaldx
+                        //     });
+                        // }
                     } else if (is_dragging) {
                         bar.update_bar_position({ x: $bar.ox + $bar.finaldx });
                     }
                 });
+
+                // update y pos
+                if (
+                    this.options.sortable &&
+                    is_dragging &&
+                    Math.abs(dy - bar_being_dragged.$bar.finaldy) >
+                        bar_being_dragged.height
+                ) {
+                    this.sort_bars().map((bar) => {
+                        const y = bar.compute_y();
+                        if (bar.task.id === parent_bar_id) {
+                            bar.$bar.finaldy = y - bar.$bar.oy;
+                            return;
+                        }
+                        bar.update_bar_position({ y: y });
+                    });
+                }
                 
                 bars.forEach(bar => {
                     const $bar = bar.$bar;
@@ -1992,11 +2116,28 @@ var Gantt = (function () {
             });
     
             document.addEventListener('mouseup', e => {
+                const dy = e.offsetY - y_on_start;
                 if (is_dragging || is_resizing_left || is_resizing_right) {
-                    bars.forEach(bar => bar.group.classList.remove('active'));
+                    // bars.forEach(bar => bar.group.classList.remove('active'));
+                    bars.forEach((bar) => {
+                        bar.group.classList.remove('active');
+    
+                        const $bar = bar.$bar;
+                        if ($bar.finaldx) {
+                            bar.date_changed();
+                            bar.set_action_completed();
+                        }
+                    });
+                    const $bar = this.bar_being_dragged.$bar;
+                    if (this.options.sortable && dy !== $bar.finaldy) {
+                        this.bar_being_dragged.update_bar_position({
+                            y: $bar.oy + $bar.finaldy,
+                        });
+                    }
                 }
     
                 this.drg = false; // drag edit finish point
+                this.bar_being_dragged = null;
                 is_dragging = false;
                 is_resizing_left = false;
                 is_resizing_right = false;
diff --git a/MAPS_Web/index.html b/MAPS_Web/index.html
index ed9e6b1..0f4eaab 100644
--- a/MAPS_Web/index.html
+++ b/MAPS_Web/index.html
@@ -71,6 +71,7 @@ <h1>스케줄링 실습 페이지</h1>
 	<script>
 		var tasks = [
 			{
+				machine_index: 0,
 				start: '2022-01-01',
 				end: '2022-01-10',
 				name: '본체 성형',
@@ -80,6 +81,7 @@ <h1>스케줄링 실습 페이지</h1>
 				custom_class: 'TASK1'
 			},
 			{
+				machine_index: 0,
 				start: '2022-01-17',
 				end: '2022-01-22',
 				name: '본체 도장',
@@ -90,6 +92,7 @@ <h1>스케줄링 실습 페이지</h1>
 				custom_class: 'TASK2'
 			},
 			{
+				machine_index: 2,
 				start: '2022-01-12',
 				end: '2022-01-15',
 				name: '부품 가공',
@@ -99,6 +102,7 @@ <h1>스케줄링 실습 페이지</h1>
 				custom_class: 'TASK3'
 			},
 			{
+				machine_index: 3,
 				start: '2022-01-24',
 				end: '2022-01-29',
 				name: '본체 및 부품 조립',
@@ -109,6 +113,7 @@ <h1>스케줄링 실습 페이지</h1>
 				custom_class: 'TASK4'
 			},
 			{
+				machine_index: 4,
 				start: '2022-01-30',
 				end: '2022-02-01',
 				name: '품질 검사',
@@ -119,6 +124,7 @@ <h1>스케줄링 실습 페이지</h1>
 				custom_class: 'TASK5'
 			},
 			{
+				machine_index: 5,
 				start: '2022-02-02',
 				end: '2022-02-03',
 				name: '서류 작업',
@@ -128,6 +134,7 @@ <h1>스케줄링 실습 페이지</h1>
 				custom_class: 'TASK6'
 			},
 			{
+				machine_index: 6,
 				start: '2022-02-04',
 				end: '2022-02-07',
 				name: '다음 공정으로 이송',
@@ -138,6 +145,7 @@ <h1>스케줄링 실습 페이지</h1>
 				custom_class: 'TASK7'
 			},
 			{
+				machine_index: 7,
 				start: '2022-02-08',
 				end: '2022-02-09',
 				name: '서류 작업 2',