时间戳

首页 > 解决方案 > 如何制作由 javascript 数组生成的 html 变量的可拖动元素

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

问题描述

一个 JavaScript 数组 (jArray) 有 5 个元素。我将它们传递到 HTML 数组 (hArray) 中。现在，我想将元素从 hArray（比如说数字 10）拖到 hFrame 中。这最后一个不起作用。

问题在于我们如何制作由 javascript 数组生成的 html 变量的可拖动元素。我发现的示例涉及固定数量的元素，在 html 中预定义。这是关于由 javascript 生成的长度未知的单词序列。

提前谢谢大家。

<!-- 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>

标签： javascript

解决方案

你需要添加一些东西：

  1. 为可拖动项目设置 ondragstart 事件
  2. 设置属性draggable为真
  3. 定义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> " ;
}

在沙盒中查看我的完整示例： https ://jsfiddle.net/denisstukalov/73zntmvd/29/#&togetherjs=tVJr9JjkUn

推荐阅读