是否可以限制 div 可以拥有的最大孩子数？

Question

所以我想限制div 可以拥有的孩子数量。

这个想法是您有一个selected commands div，您可以在其中拖放任何给定时间可用的命令（基本上是按钮），从另一个称为available commands 的div，但最多只能拖放到最大值一次四个。

这是小提琴：http://jsfiddle.net/v9Fg8/2/

如何限制div 可以拥有的最大子节点数，以便当达到 4 个时，其中一个子节点会在 drop 事件中被替换。

Answer 1

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

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));
    }
};

DEMO

使用 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));
    }
};

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

DEMO

Answer 2

getElementsBtClassName 可以超级简单：

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

在 drop 处理程序中，您只需检查 dropped.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]);
    }
};

演示：http://jsfiddle.net/v9Fg8/6/