カンバンボード風ドラッグ移動

<div class="d08-07-04-board" id="d08-07-04-board">
          <div class="d08-07-04-col" data-col="todo">
            <h4>未着手</h4>
            <div class="d08-07-04-card" draggable="true">デザイン確認</div>
            <div class="d08-07-04-card" draggable="true">原稿執筆</div>
          </div>
          <div class="d08-07-04-col" data-col="done">
            <h4>完了</h4>
            <div class="d08-07-04-card" draggable="true">公開設定</div>
          </div>
        </div>

.d08-07-04-board{display:flex;gap:10px;width:100%;max-width:280px}
        .d08-07-04-col{flex:1;background:#f3f4f8;border-radius:10px;padding:10px;min-height:150px}
        .d08-07-04-col h4{font-size:11px;font-weight:800;color:#8a8fa3;margin:0 0 8px;text-transform:uppercase;letter-spacing:.03em}
        .d08-07-04-col.is-over{background:#ece9ff;outline:2px dashed #6a5cff}
        .d08-07-04-card{background:#fff;border-radius:8px;padding:9px 10px;font-size:12px;font-weight:600;color:#2a2d3a;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:grab}
        .d08-07-04-card.is-drag{opacity:.4}

(function(){
        var root=document.getElementById('item-08-07-04');if(!root)return;
        var board=root.querySelector('#d08-07-04-board');if(!board)return;
        var dragCard=null;
        board.addEventListener('dragstart',function(e){
          var card=e.target.closest('.d08-07-04-card');if(!card)return;
          dragCard=card;card.classList.add('is-drag');
          if(e.dataTransfer)e.dataTransfer.effectAllowed='move';
        });
        board.addEventListener('dragend',function(e){
          var card=e.target.closest('.d08-07-04-card');if(card)card.classList.remove('is-drag');
          board.querySelectorAll('.d08-07-04-col').forEach(function(c){c.classList.remove('is-over');});
          dragCard=null;
        });
        board.querySelectorAll('.d08-07-04-col').forEach(function(col){
          col.addEventListener('dragover',function(e){e.preventDefault();col.classList.add('is-over');});
          col.addEventListener('dragleave',function(){col.classList.remove('is-over');});
          col.addEventListener('drop',function(e){
            e.preventDefault();col.classList.remove('is-over');
            if(dragCard)col.appendChild(dragCard);
          });
        });
      })();