Implement auto-scrolling when dragging task items (#2687)

plugins/tasklist/skins/larry/tasklist.css

@@ -680,7 +680,7 @@ ul.toolbarmenu li span.delete {
 #rootdroppable {
 	display: none;
 	position: absolute;
-	top: 36px;
+	top: 2px;
 	left: 1em;
 	right: 1em;
 	height: 5px;

plugins/tasklist/skins/larry/templates/mainview.html

@@ -68,8 +68,8 @@
 		<div class="scroller">
 			<roundcube:object name="plugin.tasks" id="thelist" />
 			<div id="listmessagebox"></div>
+			<div id="rootdroppable"></div>
 		</div>
-		<div id="rootdroppable"></div>
 	</div>
 	
 	</div>

plugins/tasklist/tasklist.js

@@ -67,6 +67,13 @@ function rcube_tasklist_ui(settings)
     var completeness_slider;
     var task_draghelper;
     var tag_draghelper;
+    var task_drag_active = false;
+    var list_scroll_top = 0;
+    var scroll_delay = 400;
+    var scroll_step = 5;
+    var scroll_speed = 20;
+    var scroll_sensitivity = 40;
+    var scroll_timer;
     var me = this;
 
     // general datepicker settings
@@ -818,6 +825,7 @@ function rcube_tasklist_ui(settings)
                 appendTo: 'body',
                 start: task_draggable_start,
                 stop: task_draggable_stop,
+                drag: task_draggable_move,
                 revertDuration: 300
             });
 
@@ -980,12 +988,45 @@ function rcube_tasklist_ui(settings)
 
         $(this).parent().addClass('dragging');
         $('#rootdroppable').show();
+
+        // enable auto-scrolling of list container
+        var container = $(rcmail.gui_objects.resultlist);
+        if (container.height() > container.parent().height()) {
+            task_drag_active = true;
+            list_scroll_top = container.parent().scrollTop();
+        }
+    }
+
+    function task_draggable_move(event, ui)
+    {
+        var scroll = 0,
+            mouse = rcube_event.get_mouse_pos(event),
+            container = $(rcmail.gui_objects.resultlist);
+
+        mouse.y -= container.parent().offset().top;
+
+        if (mouse.y < scroll_sensitivity && list_scroll_top > 0) {
+            scroll = -1; // up
+        }
+        else if (mouse.y > container.parent().height() - scroll_sensitivity) {
+            scroll = 1; // down
+        }
+
+        if (task_drag_active && scroll != 0) {
+            if (!scroll_timer)
+                scroll_timer = window.setTimeout(function(){ tasklist_drag_scroll(container, scroll); }, scroll_delay);
+        }
+        else if (scroll_timer) {
+            window.clearTimeout(scroll_timer);
+            scroll_timer = null;
+        }
     }
 
     function task_draggable_stop(event, ui)
     {
         $(this).parent().removeClass('dragging');
         $('#rootdroppable').hide();
+        task_drag_active = false;
     }
 
     function task_droppable_accept(draggable)
@@ -1055,6 +1096,22 @@ function rcube_tasklist_ui(settings)
         }
     }
 
+    /**
+     * Scroll list container in the given direction
+     */
+    function tasklist_drag_scroll(container, dir)
+    {
+        if (!task_drag_active)
+            return;
+
+        var old_top = list_scroll_top;
+        container.parent().get(0).scrollTop += scroll_step * dir;
+        list_scroll_top = container.parent().scrollTop();
+        scroll_timer = null;
+
+        if (list_scroll_top != old_top)
+            scroll_timer = window.setTimeout(function(){ tasklist_drag_scroll(container, dir); }, scroll_speed);
+    }
 
     /**
      * Show task details in a dialog