Tengo un tablero kanban bastante fácil en mi aplicación, en el que las tarjetas se pueden arrastrar y soltar en los carriles.

todo funciona bien, pero mi IDE sugiere "Símbolo obsoleto usado" en esta línea HTML, particularmente en la palabra "evento":

 <div class="card draggable shadow-sm" id="cd1" draggable="true" ondragstart="drag(event)">

He leído que ahora debería lograr el mismo resultado usando oyentes, pero como soy un principiante de JavaScript, tengo bastantes problemas con la implementación.

Esto es antes (funcionando pero obsoleto):

 //HTML <div class="card draggable shadow-sm" id="cd1" draggable="true" ondragstart="drag(event)"> //JS const drag = (ev) => { ev.dataTransfer.setData("text/plain", ev.target.id); }

Este es mi intento (no funciona):

 //HTML <div class="card draggable shadow-sm" id="cd1" draggable="true"> //JS //add listeners to draggable cards let cd = document.querySelectorAll('.draggable'); cd.forEach(card => { card.addEventListener('dragstart', (ev) => drag(ev)); } ); function drag(ev) { ev.dataTransfer.setData("text/plain", ev.target.id); }

Se agradece cualquier ayuda, he intentado seguir este Stackoverflow pero no pude encontrar una solución que funcione para mi caso. Preferiría encarecidamente no usar Jquery ni dependencias.