从文本中创建一个纯 JavaScript 对象进行拖放答案

【问题标题】：Make a pure JavaScript object from text to drag and drop从文本中创建一个纯 JavaScript 对象进行拖放
【发布时间】：2018-11-08 15:03:09
【问题描述】：

我有一个针对儿童的 Javascript 拖放测验

例如，他们可能需要用“sat”“on”“the”“chair”“John”从五张图片中造出一个句子

问题是所有这些图像都必须专门创建。

有没有办法让纯 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);
    }
}

【问题讨论】：

您的问题缺少很多信息。能否请您提供您当前的代码解决方案，并标记您想去的地方就是您想要实现的目标。
Jonathan 实际上，我想要的是，不是使用字母的背景图像创建 div，而是创建一个文本框或类似的文本框，其中包含一个或多个字母放入 .值，以便可以将带有字母或字母的对象拖到正确的位置。谢谢

标签： javascript drag-and-drop

【解决方案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;
}

【讨论】：