I've got a quite easy kanban board in my application, in which cards can be drag and dropped into lanes.

everything works fine but my IDE suggests "Deprecated symbol used" on this HTML line, particularly on the "event" word:

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

I've read that now I should achieve the same result using listeners, but since I'm a JavaScript beginner I'm having quite some problems with the implementation.

This is before (working but deprecated):

//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);
}

This is my attempt (not working):

//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);
}

Any help is appreciated, I've tried following this Stackoverflow but couldn't find a working solution for my case. I would strongly prefer not using any Jquery or dependencies.