SaaS・業務
カンバン D&D
カードを「ToDo／進行中／完了」の列間でドラッグして移動できる。Pointer Events で実装しタッチ操作にも対応。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
コード（コピーして使えます）
<div class="kb-board">
<div class="kb-col" data-col="todo">
<div class="kb-col-header">
<span class="kb-col-dot dot-todo"></span>ToDo
<span class="kb-count" id="cnt-todo"></span>
</div>
<div class="kb-cards" id="cards-todo">
<div class="kb-card" data-id="1">要件定義</div>
<div class="kb-card" data-id="2">競合調査</div>
</div>
</div>
<div class="kb-col" data-col="wip">
<div class="kb-col-header">
<span class="kb-col-dot dot-wip"></span>進行中
<span class="kb-count" id="cnt-wip"></span>
</div>
<div class="kb-cards" id="cards-wip">
<div class="kb-card" data-id="3">UI設計</div>
</div>
</div>
<div class="kb-col" data-col="done">
<div class="kb-col-header">
<span class="kb-col-dot dot-done"></span>完了
<span class="kb-count" id="cnt-done"></span>
</div>
<div class="kb-cards" id="cards-done">
<div class="kb-card" data-id="4">キックオフ</div>
</div>
</div>
</div>