如何生成javascript数组生成的html变量的可拖动元素

javascript数组jArray有5个元素。 我将它们传递到HTML数组hArray中。 现在，我想把元素从hArray中拖出，比如说10号元素拖入hFrame。 最后一个坏了

问题是我们如何使html变量的可拖动元素 由javascript数组生成。我发现的示例涉及固定数量的元素，这些元素是用html预定义的。下面是由javascript生成的一系列单词，长度为uknown

提前谢谢大家

<!-- THIS IS THE FRAME TO SEND THE DRAGGABLE ELEMENTS -->
<div id="hFrame";
style="text-align: left;
border:1px solid white;
width: 350px;
height: 200px;
padding: 10px";
ondrop= "drop(event)";
ondragover= "allowDrop(event)"></div>

<!-- THIS IS THE HTML VARIABLE hArray -->
<div id="hArray"></div>

<!-- THESE ARE THE FUNCTIONS FOR DRAGGING -->
<script>
    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        ev.target.appendChild(document.getElementById(data));
    }

    function allowDrop(ev) {
        ev.preventDefault();
    }
</script>


<!--  THIS IS THE SCRIPT FOR PRODUCING THE jArray WHICH PASSES ITS ELEMENTS TO hArray -->
<script>
    class Array {
        constructor(){
            this.length=0; 
            this.data={}; 
        }
        push(element){ 
            this.data[this.length]=element; 
            this.length++; 
            return this.length
        } 
        getElementAtIndex(index){ 
            return this.data[index]; 
        }
    }

//pushing element  
    const jArray= new Array();
    jArray.push(12); 
    jArray.push(13);
    jArray.push(14); 
    jArray.push(10); 
    jArray.push(989);

    for (var y=0; y< jArray.length; y++) {
        document.getElementById("hArray").innerHTML += jArray.getElementAtIndex(y) + " ";
    }

</script>

---

您需要添加一些内容：

为可拖动项设置ondragstart事件 将属性draggable设置为true 为可拖动项定义属性id 所以，循环应该是这样的：

for (var y=0; y< jArray.length; y++) {
    document.getElementById("hArray").innerHTML += '<span draggable="true" ondragstart="drag(event)" id=' + y + '>' + jArray.getElementAtIndex(y) + "</span> " ;
}

请参阅沙盒中的完整示例：

---

防止使用保留关键字或接口创建新类。您将覆盖已存在的数组全局对象。我不使用保留关键字。我用的是哈雷和贾雷，它们不是保留的。但任何其他名称，而不是这些，产生相同的。类数组来自另一个广泛使用的示例，它也不会引起问题。谢谢你的评论。我以后会处理的。它很有效！！！非常感谢你！！！这是一个非常聪明的解决办法。