是否可以限制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/