* task #44358, project kanban support drag-and-drop.

module/project/css/kanban.css

@@ -19,5 +19,6 @@
 
 table th, td {border: 2px solid #fff !important;}
 
-#kanban {padding-bottom: 10px}
 .kanban-col[data-type='closedProject'] .count {display: none}
+.kanban-item > a {cursor: move;}
+.kanban-item.execution-item > a {cursor: pointer;}

module/project/js/kanban.js

@@ -57,6 +57,80 @@ function processKanbanData(key, programGroup)
     return {id: kanbanId, columns: columns, lanes: lanes};
 }
 
+/*
+ * Find drop columns
+ * @param {JQuery} $element Drag element
+ * @param {JQuery} $root Dnd root element
+ */
+function findDropColumns($element, $root)
+{
+    var $col        = $element.closest('.kanban-col');
+    var col         = $col.data();
+    var lane        = $col.closest('.kanban-lane').data();
+    var kanbanID    = $root.data('id');
+    console.log('findDropColumns', {$element, $root, kanbanID, col, lane});
+    var kanbanRules = window.kanbanDropRules ? window.kanbanDropRules[kanbanID] : null;
+
+    if(!kanbanRules) return $root.find('.kanban-lane[data-id="' + lane.id + '"] .kanban-lane-col:not([data-type="doingExecution"],[data-type="' + col.type + '"])');
+
+    var colRules = kanbanRules[col.type];
+    var lane     = $col.closest('.kanban-lane').data('lane');
+    return $root.find('.kanban-lane-col').filter(function()
+    {
+        if(!colRules) return false;
+        if(colRules === true) return true;
+
+        var $newCol = $(this);
+        var newCol = $newCol.data();
+        if(newCol.id === col.id) return false;
+
+        var $newLane = $newCol.closest('.kanban-lane');
+        var newLane = $newLane.data('lane');
+        return colRules.indexOf(newCol.type) > -1 && newLane.id === lane.id;
+    });
+}
+
+/**
+ * Change column type for a card
+ * 变更卡片类型
+ * @param {Object} card        Card object
+ * @param {String} fromColType The column type before change
+ * @param {String} toColType   The column type after change
+ * @param {String} kanbanID    Kanban ID
+ */
+function changeCardColType(card, fromColType, toColType, kanbanID)
+{
+    /* TODO: Post data to server on change card type 将变更卡片类型操作提交到服务器  */
+    console.log('TODO: Post data to server on change card type 将变更卡片类型操作提交到服务器', {card, fromColType, toColType, kanbanID});
+
+    /*
+        // TODO: The server must return a updated kanban data  服务器返回更新后的看板数据
+
+        // 调用 updateKanban 更新看板数据
+        updateKanban(kanbanID, newKanbanData);
+    */
+}
+
+/**
+ * Handle finish drop task
+ * @param {Object} event Event object
+ * @returns {void}
+ */
+function handleFinishDrop(event)
+{
+    var $card = $(event.element); // The drag card
+    var $dragCol = $card.closest('.kanban-lane-col');
+    var $dropCol = $(event.target);
+
+    /* Get d-n-d(drag and drop) infos  获取拖放操作相关信息 */
+    var card = $card.data('item');
+    var fromColType = $dragCol.data('type');
+    var toColType = $dropCol.data('type');
+    var kanbanID = $card.closest('.kanban').data('id');
+
+    changeCardColType(card, fromColType, toColType, kanbanID);
+}
+
 $(function()
 {
     /* Init all kanbans */
@@ -64,6 +138,17 @@ $(function()
     {
         var $kanban = $('#kanban-' + key);
         if(!$kanban.length) return;
-        $kanban.kanban({data: processKanbanData(key, programGroup), maxColHeight: 'auto'});
+        $kanban.kanban(
+        {
+            data:         processKanbanData(key, programGroup),
+            maxColHeight: 'auto',
+            droppable:
+            {
+                selector:     '.kanban-item:not(.execution-item)',
+                target:       findDropColumns,
+                finish:       handleFinishDrop,
+                mouseButton: 'left'
+            },
+        });
     });
 });

module/project/view/kanban.html.php

@@ -24,7 +24,7 @@
       <strong><?php echo $lang->project->typeList[$type];?></strong>
     </div>
     <div class='panel-body'>
-      <div id='kanban-<?php echo $type;?>' class='kanban'></div>
+      <div id='kanban-<?php echo $type;?>' class='kanban' data-id='<?php echo $type;?>'></div>
     </div>
   </div>
   <?php endforeach; ?>