Сделайте чистый объект JavaScript из текста для перетаскивания

Question

У меня есть Javascript перетащить и опустить для детей

Например, им, возможно, придется составить предложение из пяти изображений с надписью «сидел», «на», «стул», «Джон»

Проблема в том, что все эти изображения должны быть специально созданы.

Есть ли способ для чистого Javascript взять текст «sat» и сделать его объектом, который можно использовать для перетаскивания вместо изображений?

Текущий код (который содержит только изображения букв для написания слов):

function addDivs(mdiv,numA,preD,isOn){
    var tdiv = document.getElementById(mdiv);
    for(var i=0; i<numA.length;i++){
        var sLet = String(numA[i]);
        var turl = String("img/"+sLet+".gif");
        var sdiv = document.createElement("div");
        sdiv.style.width = "80px";
        sdiv.style.height = "80px";
        sdiv.id = String(preD+sLet);
        sdiv.style.margin = "5px";
        sdiv.style.display = "inline-block";
        if(isOn){
            sdiv.style.backgroundImage="url("+turl+")";
            sdiv.style.backgroundRepeat = "no-repeat";
            sdiv.addEventListener('dragstart',drag);
            sdiv.draggable = true;
        }else{
            sdiv.style.background = "white";
            sdiv.addEventListener('drop',drop);
            sdiv.addEventListener('dragover',allowDrop);
        }

        tdiv.appendChild(sdiv);
    }
}

Answer 1

В случае, если у кого-то возникнет тот же вопрос, решение (данное мне программистом) заменить изображение букв довольно просто

//Replace the following lines of code in the above question

sdiv.style.backgroundImage="url("+turl+")";
sdiv.style.backgroundRepeat = "no-repeat";

// with the following two lines

sdiv.className ='stpder';
sdiv.textContent = sLet;

//define the following in the CSS

.stpder{
    background-color: white !important;
    font-size: 68px;
    line-height: 80px;
    text-align: center;
    border: solid 1px;
}