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

Question

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

这个想法是你有一个selected commands div，你可以在任何给定的时间拖放任何一个命令（基本上是按钮），从另一个名为div的{​​{1}}，但一次最多只能有四个。

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

如何限制此available commands可能拥有的最大子女数量，以便当它达到4时，其中一个孩子会被div事件替换。

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

并在内部放置处理程序中，您只需检查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/