デモンストレーション

See the Pen jKanban Example 3 by bunatree (@bunatree) on CodePen.

jKanbanのコールバック

click: function (el) {},              // カードが左クリックされた時に実行
context: function (el, event) {},     // カードが右クリックされた時に実行
dragEl: function (el, source) {},     // カードのドラッグが始まった時に実行
dragendEl: function (el) {},          // カードがドラッグが終わった時に実行
dropEl: function (el, target, source, sibling) {}, // カードがドロップされたときに実行
dragBoard: function (el, source) {},  // カラムのドラッグを開始した時に実行
dragendBoard: function (el) {},       // カラムのドラッグが終わった時に実行
buttonClick: function(el, boardId) {} // カード追加ボタンがクリックされた時に実行

アクション実行時の動作を設定

カードが左クリックされたときの動作

click: function (el) {
  onKanbanItemClicked(el);
},

function onKanbanItemClicked(el) {
  showMessage('カード「' + el.innerText + '」が左クリックされました。');
}

function showMessage(msg) {
  document.getElementById('show-message').innerHTML = msg;
}

カードがドラッグ＆ドロップされたときの動作

• 同じカラム内にドロップされたとき（＝カラム内でカードの順序が変更されたとき）メッセージを表示する。
• 異なるカラムにドロップされたとき（＝カードが別のカラムに移動したとき）メッセージを表示する。
• カードが「完了」カラムへ移動したときは、グレーアウトさせ、テキストに取り消し線を入れる。
• カードが「完了」カラムから他のカラムへ移動したときは、グレーアウトと取り消し線を解除する。

dropEl: function (el, target, source, sibling) {
  onKanbanItemDropped(el, target, source, sibling);
},

function onKanbanItemDropped(el, target, source, sibling) {
  // 移動元カラムのタイトル
  const sourceTitle = source.parentNode.querySelector('header').innerText;
  // 移動元カラムのID
  const sourceId = source.parentNode.dataset.id;
  // 移動先カラムのタイトル
  const targetTitle = target.parentNode.querySelector('header').innerText;
  // 移動元カラムのID
  const targetId = target.parentNode.dataset.id;

  // 同じカラム内の移動か、それとも異なるカラム間の移動かを判別
  const sameColumn = (sourceId === targetId) ? true : false;

  // カラム内 or カラム間の移動によってメッセージを変える
  const alertMsg = (sameColumn) ? 
    'カード「' + el.innerText + '」が、カラム『' + sourceTitle + '』内で移動しました。':
    'カード「' + el.innerText + '」が、カラム『' + sourceTitle + '』からカラム『' + targetTitle + '』へ移動しました。';

  // メッセージを表示
  showMessage(alertMsg);
  
  // 異なるカラム間の移動なおかつ移動先カラムが「完了」の場合
  // カードのステータスを「done」にする。
  // 異なるカラム間の移動なおかつ移動先カラムが「完了」以外の場合
  // カードのステータスを「todo」にする。
  if (!sameColumn && targetTitle === '完了') {
    setKanbanItemStatus(el, 'done');
  } else if (!sameColumn && targetTitle !== '完了') {
    setKanbanItemStatus(el, 'todo');
  }

}

同じカラム内の移動か別のカラムへの移動かを判定

// 移動元カラムのID
const sourceId = source.parentNode.dataset.id;

// 移動先カラムのID
const targetId = target.parentNode.dataset.id;

// 同じカラム内の移動か、それとも異なるカラム間の移動かを判別
const sameColumn = (sourceId === targetId) ? true : false;

「完了」カラムへの移動、「完了」カラムからの移動

if (!sameColumn && targetTitle === '完了') {
  setKanbanItemStatus(el, 'done');
} else if (!sameColumn && targetTitle !== '完了') {
  setKanbanItemStatus(el, 'todo');
}

function setKanbanItemStatus(el, status) {
  // ステータスが「done」の場合は
  // カードの「todo」クラスを「done」に変更する。
  if (status === 'done') {
    el.classList.remove('todo');
    el.classList.add('done');
  // ステータスが「done」以外の場合は
  // カードの「done」クラスを「todo」に変更する。
  } else {
    el.classList.remove('done');
    el.classList.add('todo');
  }
}

{
  "id": "item-id-1",
  "title": "AAA",
  "class": "todo"
},
{
  "id": "item-id-2",
  "title": "BBB",
  "class": "todo,orange",
}

/* 完了したカードのテキストを灰色にして取り消し線を入れる */
.kanban-item.done {
  color: gray;
  text-decoration: line-through;
  background-color: whitesmoke;
}
/* 完了したカードの画像を75%モノクロにして薄く表示する */
.kanban-item.done img {
  filter: grayscale(75%);
  opacity: 0.5;
}

まとめ

• カードがクリックされたら、クリックされた記事の詳細情報を表示するダイアログを表示
• カードがカラム内で移動したら、カラム内のカードの順序をデータベースに保存
• カードが別カラムへ移動したら、データベースに保存されている移動先カラムのカード一覧情報を更新
• 移動先カラムが「完了」で、ドロップされた記事の種類が「タスク」だったら、タスクのステータスを「done」に変更