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

Question

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

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

这是小提琴： 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/