Why should you care?

MarkupVerse kanban boards and file upload drop zones use native DnD before JS libraries.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<ul id="pipeline" aria-label="Deal stages">
  <li draggable="true" data-deal="Acme Corp">Acme Corp — $12k</li>
</ul>
<div id="won" role="region" aria-label="Won deals">Drop won deals here</div>
<script>
document.querySelector('[draggable]').addEventListener('dragstart', e => {
  e.dataTransfer.setData('text/plain', e.target.dataset.deal);
});
document.getElementById('won').addEventListener('dragover', e => e.preventDefault());
document.getElementById('won').addEventListener('drop', e => {
  e.preventDefault();
  e.target.textContent = 'Won: ' + e.dataTransfer.getData('text/plain');
});
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• dragstart sets data; drop targets need dragover preventDefault.
• Keyboard users need alternate controls.

Practice next

1. Set draggable="true".
2. Wire dragstart and drop.
3. preventDefault on dragover.
4. Add a second pipeline column.
5. Style .dragging with a CSS class.

Remember

draggable + events. dataTransfer payload. Keyboard fallback needed.

MarkupVerse sales board

Rep drags Acme to Won.

Outcome: Deal stage updates without a full page reload.