update

templates/tasks/main_view.php

@@ -196,6 +196,14 @@
   .tasks_main_view ._left_column ._projects ._project .project_delete_inline i {
     font-size: 10px;
   }
+
+  .gantt-target .gantt-container.gantt-draggable {
+    cursor: grab;
+  }
+
+  .gantt-target .gantt-container.gantt-dragging {
+    cursor: grabbing;
+  }
 </style>
 <script type="text/javascript">
   let isProgrammaticUpdate = false;
@@ -349,6 +357,64 @@
   });
   console.log(gantt_chart);
 
+  function setupGanttDragScroll( ganttChart )
+  {
+    if ( !ganttChart || !ganttChart.$container )
+      return;
+
+    var ganttContainer = ganttChart.$container;
+    if ( ganttContainer.dataset.dragScrollBound === '1' )
+      return;
+
+    var dragState = {
+      isDragging: false,
+      startX: 0,
+      startScrollLeft: 0
+    };
+    var ignoredSelector = '.bar-wrapper, .handle, .popup-wrapper, .arrow, .bar-label, .title, .subtitle, .tools, .date, .upper-text, .lower-text, #add, #edit, #valid, #more';
+
+    ganttContainer.dataset.dragScrollBound = '1';
+    ganttContainer.classList.add( 'gantt-draggable' );
+
+    ganttContainer.addEventListener( 'mousedown', function( event ) {
+      if ( event.button !== 0 )
+        return;
+
+      var eventTarget = event.target;
+      if ( !eventTarget || typeof eventTarget.closest !== 'function' )
+        return;
+
+      if ( eventTarget.closest( ignoredSelector ) )
+        return;
+
+      dragState.isDragging = true;
+      dragState.startX = event.pageX;
+      dragState.startScrollLeft = ganttContainer.scrollLeft;
+      ganttContainer.classList.add( 'gantt-dragging' );
+      document.body.style.userSelect = 'none';
+      event.preventDefault();
+    } );
+
+    document.addEventListener( 'mousemove', function( event ) {
+      if ( !dragState.isDragging )
+        return;
+
+      var horizontalOffset = event.pageX - dragState.startX;
+      ganttContainer.scrollLeft = dragState.startScrollLeft - horizontalOffset;
+    } );
+
+    document.addEventListener( 'mouseup', function() {
+      if ( !dragState.isDragging )
+        return;
+
+      dragState.isDragging = false;
+      ganttContainer.classList.remove( 'gantt-dragging' );
+      document.body.style.userSelect = '';
+    } );
+  }
+
+  setupGanttDragScroll( gantt_chart );
+
   function reload_tasks( projects, users )
   {
     //load tasks by ajax