how can I dynamically add ondrag event in a created span

Question

New to javascript, sorry my English is bad.

I call getpb() from HTML, this is what I want

<span id="drag1" title="teeth" draggable="true" ondragstart="dragThis(event)">my teeth</span>

This is what I have, I access array , I set the for loop to 10 instead of array length

function getpb(){
    j=1;
    var pbdiv = document.getElementById("pickBox");
    for (var i=0; i<10;i++)
    {
        var elem = document.createElement("span");
        document.getElementById("pickBox").appendChild.elem;
        elem.id = [j];
        elem.title = "teeth";
        elem.draggable = "true"; 
        elem.ondrag ? does not work
        elem.innerHTML = "my teeth";
        console.log(elem);
        pbdiv.appendChild(elem);
        i++;
        j++;
    }
}

Answer 1

You're almost there. You just need to add ondragstart event there

function dragThis(event){
  //TODO: Add your logic here
  console.log('dragging')
  console.log(event.target.id)
}

function getpb(){
    j=1;
    var pbdiv = document.getElementById("pickBox");
    for (var i=0; i<10;i++)
    {
        var elem = document.createElement("span");
        document.getElementById("pickBox").appendChild.elem;
        elem.id = [j];
        elem.title = "teeth";
        elem.draggable = "true"; 
        elem.ondragstart = dragThis
        elem.innerHTML = "my teeth";
        pbdiv.appendChild(elem);
        i++;
        j++;
    }
}

getpb()

<div id="pickBox">

</div>