所以我想限制 div
可以拥有的 child 的数量。
这个想法是你有一个selected commands div
,你可以在任何给定时间从另一个div
拖放任何可用的命令(基本上是按钮) > 调用了可用命令
,但一次最多只能调用四个。
这是 fiddle :http://jsfiddle.net/v9Fg8/2/
我如何限制此 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));
}
};
此代码更好,因此您可以将元素放在元素上,这样您就不会附加到框。
关于javascript - 是否可以限制一个 div 可以拥有的最大子级数量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21481428/