javascript - 是否可以限制一个 div 可以拥有的最大子级数量?

标签 javascript jquery css drag-and-drop

所以我想限制 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));
    }
};

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

关于javascript - 是否可以限制一个 div 可以拥有的最大子级数量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21481428/

相关文章:

JavaScript/WebSQL : how to cancel query

javascript - Grunt uglify 后,Angular Controller 模块无法实例化

dom中所有图像加载后jquery回调?

javascript - 菜单链接无法正常工作

html - 在 Flex 元素列中,将最后两个元素放在一行中

javascript - TypeScript + React.Lazy

javascript - 如何从 jQuery 选择器中获取 DOM 元素?

jquery - 如何给 css 自动对齐聊天消息?

javascript - $getScript 加载 google maps api 的方法 -> 空白页面?

css - 媒体查询 "only screen"语法的功能?