Javascript 随机字中的随机字母

我有4个单词，每个单词有4个字母。我需要从这四个词中选择一个词。有了这1个单词，我需要随机排列字母顺序，并将其放入可拖动的框中。然后我需要把那个盒子按正确的顺序拖进去

这用于从数组生成随机字：

 var myShows = ['coco','bobo','lolo','popo'];
 var show = myShows[Math.floor(Math.random() * myShows.length)];

我不知道如何从生成的随机单词中随机放置字母：

function handleDragStart(e) {
                e.dataTransfer.setData("text", this.id);
            }
            function handleDragEnterLeave(e) {
                if (e.type == "dragenter") {
                    this.className = "drag-enter";
                } else {
                    this.className = "";
                }
            }
            function handleOverDrop(e) {
                e.preventDefault();
                if (e.type != "drop") {
                    return;
                }
                var draggedId = e.dataTransfer.getData("text");
                var draggedEl = document.getElementById(draggedId);
                if (draggedEl.parentNode == this) {
                    return;
                }
                draggedEl.parentNode.removeChild(draggedEl);
                this.appendChild(draggedEl);
                this.className = "";
            }
            window.onload = function () {


                var myShows = ['coco','bobo','lolo','popo'];
                var show = myShows[Math.floor(Math.random() * myShows.length)];
                //document.write(show);
              /*i'd tried this below code to generate random letter but it just working in log,
              how would i use that to store*/
for (var i = 0; i < show.length; i++) {
  console.log(show.charAt(i));
    //document.write(show.charAt(i));
}
               // document.randform.rf.value=show;

                var draggable = document.querySelectorAll("[draggable]");
                var targets = document.querySelectorAll("[data-drop-target]");
                for (var i = 0; i < draggable.length; i++) {
                    draggable[i].addEventListener("dragstart", handleDragStart);
                }
                for (i = 0; i < targets.length; i++) {
                    targets[i].addEventListener("dragover", handleOverDrop);
                    targets[i].addEventListener("drop", handleOverDrop);
                    targets[i].addEventListener("dragenter", handleDragEnterLeave);
                    targets[i].addEventListener("dragleave", handleDragEnterLeave);
                }
            };

功能手柄启动（e）{
e、 dataTransfer.setData（“text”，this.id）；
}
功能手柄（e）{
如果（例如，类型==“排水剂”）{
this.className=“拖动回车键”；
}否则{
this.className=“”；
}
}
功能手柄超速档（e）{
e、 预防默认值（）；
如果（例如，类型！=“下降”）{
返回；
}
var draggedId=e.dataTransfer.getData（“文本”）；
var draggedEl=document.getElementById（draggedId）；
if（draggedEl.parentNode==此）{
返回；
}
draggedEl.parentNode.removeChild（draggedEl）；
这个孩子（德拉格德尔）；
this.className=“”；
}
window.onload=函数（）{
var myShows=['coco'，'bobo'，'lolo'，'popo']；
var show=myShows[Math.floor（Math.random（）*myShows.length）]；
//文件。书写（显示）；
/*我尝试了下面的代码来生成随机字母，但它只是在日志中工作，
我如何使用它来存储*/
对于（变量i=0；i

这是我的HTML正文：

  <div class="panel">
                    <div data-drop-target="true"></div>
                    <div data-drop-target="true"></div>
                    <div data-drop-target="true"></div>
                    <div data-drop-target="true"></div>
                </div>
                <div class="panel" >
                    <div data-drop-target="true" draggable="true" ></div>
                    <div data-drop-target="true" draggable="true"> </div>
                   <div data-drop-target="true" draggable="true"> </div>
                    <div data-drop-target="true" draggable="true"> </div>
                </div>

---

那么，如何保存原始单词并将其与拖动的框进行比较呢？

您可以提供任何plunker吗？使用全局变量存储所选单词。使用

string.split（“”）

将单词拆分为数组，然后（在循环中）从该数组中随机选取一个字符，将其设置在下一个空闲/打开框中，并将其从数组中移除。当数组为空时，继续。检查时，只需获取每个按顺序放置的框的内容，并检查是否将单词存储在全局变量中。