来自随机单词的随机字母

Question

我有4个单词，每个单词有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);
                }
            };

这是我的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>

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