diff --git a/client/src/app/instance/search/components/result/datatable.component.scss b/client/src/app/instance/search/components/result/datatable.component.scss
index 2894dff1a7b6893f06b5988777ef77ce7fa5d7a5..6c389ef5c3e5138e087778832294d61e6e18c5aa 100644
--- a/client/src/app/instance/search/components/result/datatable.component.scss
+++ b/client/src/app/instance/search/components/result/datatable.component.scss
@@ -12,7 +12,11 @@ table th:not(.select) {
     cursor: move;
 }
 
-.over {
+.over-left {
+    border-left: 3px dotted #666;
+}
+
+.over-right {
     border-right: 3px dotted #666;
 }
 
diff --git a/client/src/app/instance/search/components/result/datatable.component.ts b/client/src/app/instance/search/components/result/datatable.component.ts
index 46ca4651cbcbd9b75d7908ae71a9181c737b9880..d391ab1a4f11e1b378425cec8b2afbf63a5b4877 100644
--- a/client/src/app/instance/search/components/result/datatable.component.ts
+++ b/client/src/app/instance/search/components/result/datatable.component.ts
@@ -70,8 +70,9 @@ export class DatatableComponent implements OnInit, OnChanges {
                 const table = document.getElementById('datatable');
 
                 let dragSrcEl;
-                let outputSrcId;
-                let clonedOutputList;
+                let outputSrcId: number;
+                let clonedOutputList: number[];
+                let direction = '';
                 const updateOutputList = this.updateOutputList;
 
                 const getOutputList = () => [...this.outputList];
@@ -90,22 +91,40 @@ export class DatatableComponent implements OnInit, OnChanges {
 
                 function handleDragOver(e) {
                     e.preventDefault();
+
+                    let rect = this.getBoundingClientRect();
+                    let posisitionX = e.pageX;
+
+                    let half = rect.x + (rect.width / 2);
+
+                    if (posisitionX < half) {
+                        this.classList.remove('over-right');
+                        this.classList.add('over-left');
+                        direction = 'left';
+                    } else {
+                        this.classList.remove('over-left');
+                        this.classList.add('over-right');
+                        direction = 'right';
+                    }
+
                     return false;
                 }
 
                 function handleDragEnter(e) {
-                    this.classList.add('over');
+                    
                 }
 
                 function handleDragLeave(e) {
-                    this.classList.remove('over');
+                    this.classList.remove('over-left');
+                    this.classList.remove('over-right');
                 }
 
                 function handleDragEnd(e) {
                     this.style.opacity = '1';
 
                     items.forEach(function (item) {
-                        item.classList.remove('over');
+                        item.classList.remove('over-left');
+                        item.classList.remove('over-right');
                     });
                 }
 
@@ -118,8 +137,6 @@ export class DatatableComponent implements OnInit, OnChanges {
                         const index = clonedOutputList.indexOf(outputSrcId);
                         clonedOutputList.splice(index, 1);
 
-                        console.log(clonedOutputList);
-
                         // Add src attribute ID
                         for (let i = 0; i < items.length; i++) {
                             if (items[i] === this) {