svg

templates/project/view.html.twig

@@ -16,12 +16,14 @@
         z-index: 1000;
     }
 
+
     main { 
         padding-top:80px;
     }
 
     content {
         padding:0px;
+        overflow:auto;
     }
 
     .issueContainer {
@@ -42,6 +44,7 @@
     .scrumContainer {
         display:none;
         padding-left:300px;
+        width:10000px;
     }
 
     .containerStatus{
@@ -313,7 +316,7 @@
     </div>
 
     {% for issue in project.issues %}
-        <div class="issueCard card tracker{{issue.redmine.tracker.id}} category{{(issue.redmine.category is defined?issue.redmine.category.id:'0') }}" data-status='{{issue.redmine.status.id}}' data-sprint='{{issue.rowsprint}}' data-version='{{(issue.redmine.fixed_version is defined?issue.redmine.fixed_version.id:'')}}' data-id='{{issue.id}}'>
+        <div class="issueCard {{issue.color}} card tracker{{issue.redmine.tracker.id}} category{{(issue.redmine.category is defined?issue.redmine.category.id:'0') }}" data-status='{{issue.redmine.status.id}}' data-sprint='{{issue.rowsprint}}' data-version='{{(issue.redmine.fixed_version is defined?issue.redmine.fixed_version.id:'')}}' data-id='{{issue.id}}'>
             <div class='issueHeader'>
                 <div class='issueId'>#{{issue.id}}</div>
                 <div class='issueTitle'>
@@ -665,8 +668,13 @@
                 $sourceContainer = ui.item.parent();
                 $movedItem = ui.item;
                 originalIndex = ui.item.index();
+                enableAutoScroll($(window)); // ou remplace par ton conteneur scrollable
             },
 
+            stop: function () {
+                disableAutoScroll();
+            },
+            
             update: function (event, ui) {
                 console.log("UPDATE");
                 if (!event.originalEvent) return;
@@ -697,7 +705,7 @@
                 data: {
                     target: targetId,
                     targetIssues: targetIssues
-                },
+                },                
                 success: function (response) {
                     console.log('Déplacement réussi', response);
                 },
@@ -725,7 +733,39 @@
         }
     });
 
+    let autoScrollInterval = null;
 
+    function enableAutoScroll($container) {
+        $(document).on('mousemove.autoScroll', function (e) {
+            const scrollMargin = 50; // px depuis le bord de la fenêtre
+            const scrollSpeed = 20;  // px à chaque tick
+
+            const mouseY = e.clientY;
+            const windowHeight = window.innerHeight;
+
+            // Scroll vers le haut
+            if (mouseY < scrollMargin) {
+                clearInterval(autoScrollInterval);
+                autoScrollInterval = setInterval(() => {
+                    $container.scrollTop($container.scrollTop() - scrollSpeed);
+                }, 50);
+            }
+            // Scroll vers le bas
+            else if (mouseY > windowHeight - scrollMargin) {
+                clearInterval(autoScrollInterval);
+                autoScrollInterval = setInterval(() => {
+                    $container.scrollTop($container.scrollTop() + scrollSpeed);
+                }, 50);
+            } else {
+                clearInterval(autoScrollInterval);
+            }
+        });
+    }
+
+    function disableAutoScroll() {
+        $(document).off('mousemove.autoScroll');
+        clearInterval(autoScrollInterval);
+    }
 
 </script>
 {% endblock %}