Javascript 是否可以限制一个div可以拥有的最大子女数？

所以我想限制一个

div

可以拥有的孩子的数量

其思想是，您可以使用一个

选定命令div

，在该div中，您可以在任何给定时间从另一个

div

中拖放任何可用的命令（基本上是按钮），该div称为

可用命令

，但一次最多只能拖放四个命令

这是小提琴：

---

如何限制此

div

可以具有的最大可能子元素的数量，以便当它达到4时，在

drop

事件中替换其中一个子元素。

您可以检查容器中的元素是否过多，并在这样拖动时保存父元素

function drag(ev) {
    itemParent = ev.target.parentElement;
    //console.log(itemParent);
    ev.dataTransfer.setData("Text", ev.target.id);
};

function drop(ev) {
    ev.preventDefault();
    if (ev.target.childNodes.length == 4) {
        var data = ev.dataTransfer.getData("text");
        console.log(itemParent);
        itemParent.appendChild(document.getElementById(data));
    } else {
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
};

使用jQuery

function drop(ev) {
    ev.preventDefault();
    if ($('.commands').not(itemParent).children().length == 4) {
        var data = ev.dataTransfer.getData("text");
        console.log(itemParent);
        itemParent.appendChild(document.getElementById(data));
    } else {
        var data = ev.dataTransfer.getData("Text");
        $('.commands').not(itemParent).append($('#' + data));
        //ev.target.appendChild(document.getElementById(data));
    }
};

这段代码更好，因此可以将元素放在元素上，这样就不会附加到框中

---

使用

getElementsBtClassName

可以非常简单：

var dropped = document.getElementById('selected').getElementsByClassName('button');

在drop handler中，您只需检查drop.length的

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

    // Check number of children
    if (dropped.length > 4) {
        ev.target.removeChild(dropped[0]);
    }
};

演示：那么你想删除哪个孩子？有吗？@dfsq：要么是你决定放在上面的那个，要么是列表中的第一个（这样新的就可以放在列表的末尾了）。是的，似乎就是这个；但是，我希望当已经有4个元素时，从顶部框中移除的元素可以在底部框中重新应用。我想交换元素，而不是让它们消失。在将其从所选div中删除之前，是否应将删除的[0]

追加到可用div中？