Drag & Drop API

I had researched how to perform the drag and drop functions in JS by reading this article on W3Schools and in it, it instructs you to bind the event listeners, inlined with in the HTML document, which I did:

<div class="pitch__player player-1" ondrop="dropPlayer(event)" ondragover="allowPlayerDrop(event)">

But, this meant copying and pasting the same code onto every of the eleven player DIV elements. This felt a bit dirty to me as the technique doesn't adhere to the DRY "Don't Repeat Yourself" principles of writing code and also meant a maintenance headache should I ever wish to change the names of the functions as I would have to change it every it in multiple places in the HTML file.

This was kind of bugging me, so I thought why not attach the drag/drop event listeners in exactly the same way I do with adding click events to buttons? This is simply, with the JS file to create a variable with a reference to the element and then add an event listener to the element which then calls a function. Will this work? Let's find out...