Question

我是JS和HTML的新手，我正在努力完成以下任务 - 创建可拖动的圆圈组（在2d平面上随机散布）。

我成功创建了一个圈子 - check_here

但我不知道如何创建任意多个（与用户指定的一样多）。因为现在圆圈是html体中的div元素。所以我不知道如何创建在一些边界框内随机分散的多个。

有任何帮助吗？谢谢你

<html>
<style>

</style>
<body>

<div id="circle"></div>

<script>
//Make the DIV element draggagle:
dragElement(document.getElementById(("circle")));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  elmnt.onmousedown = dragMouseDown;


    function dragMouseDown(e) {
        e = e || window.event;
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
    }

}
</script>

</body>
</html>

Answer 1

我可以给你一些提示：

首先，您可以在脚本中创建新的div，而不仅仅是使用document.createElement('div')在HTML中指定的div，并使用document.body.appendChild(myDiv)将这些div附加到文档的正文中。

其次，您可以使用class而不是id来指定每个div显示一个圆圈 - id必须是唯一的，但多个元素可以是同一个班级。

使用上述信息，以及您已经知道如何处理代码的内容，应该可以帮助您解决这个问题。

如何创建分散在边界框内的多个圆

1 个答案: