如何定义组件掉落的确切位置？

问题描述

我使用 Grapesjs，我的页面上有“关于我们”块。我想用 Grapesjs 使这个块可编辑。所以有容器和带有照片和描述的子项。我的理解是：Grapesjs 块应该代表容器，Grapes 组件应该代表单个子卡。然后我想把子项目阻止。

这里是container和childs的html结构：

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <h2>Über uns</h2>
        </div>

        <div class="about-wrap">
            <div class="about-line">
                <div class="about-itm">
                    <div class="about-itm-inner">
                        <a href="#" class="about-itm-photo">
                            <span class="img-inner-Box" style="background-image: url(/img/about/1.png);">
                                <img src="/css/img/square.png" alt="base">
                                <img class="main-img" src="/img/about/1.png" alt="" title="">
                            </span>
                        </a>

                        <div class="about-itm-txt">
                            <div class="about-itm-name">Andrea</div>
                            <div class="about-itm-brief">
                                Weit hinten,hinter den Wortbergen,fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

在我看来这应该是 Grapesjs 块（容器）的 html：

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <h2>Über uns</h2>
        </div>

        <div class="about-wrap">
            <div class="about-line">

            </div>
        </div>
    </div>
</section>

在我看来这应该是 Grapesjs 组件 html（子卡）：

<div class="about-itm">
    <div class="about-itm-inner">
        <a href="#" class="about-itm-photo">
                        <span class="img-inner-Box" style="background-image: url(/img/about/1.png);">
                            <img src="/css/img/square.png" alt="base">
                            <img class="main-img" src="/img/about/1.png" alt="" title="">
                        </span>
        </a>

        <div class="about-itm-txt">
            <div class="about-itm-name">Andrea</div>
            <div class="about-itm-brief">
                Weit hinten,fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>
            </div>
        </div>
    </div>
</div>

这里是JS代码：

const editor = grapesjs.init({
    container: '#gjs',fromElement: 1,storageManager: { type: 0 },// plugins: [myNewComponentTypes],// plugins: ['gjs-blocks-basic']
});

let blockManager = editor.BlockManager;


editor.Components.addType('about-us-item',{
        isComponent: el => el.className && el.className.split(' ').includes('about-us-item'),// Model deFinition
        model: {
            // Default properties
            defaults: {
                tagName: 'section',// draggable: 'form,form *',// Can be dropped only inside `form` elements
                draggable: false,droppable: false,// Can't drop other elements inside
            }
        }
    });

blockManager.add('about-us-item',{
        label: 'About us',attributes: {class:'fa fa-user-circle-o'},content: '<div class="about-itm">' +
            '<div class="about-itm-inner">' +
            '<a href="#" class="about-itm-photo">\n' +
            '<span class="img-inner-Box" style="background-image: url(/img/about/1.png);">' +
            '<img src="/css/img/square.png" alt="base">' +
            '<img class="main-img" src="/img/about/1.png" alt="" title="">' +
            '</span>' +
            '</a>' +
            '<div class="about-itm-txt">' +
            '<div class="about-itm-name">Andrea</div>' +
            '<div class="about-itm-brief">' +
            'Weit hinten,fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>',category: 'Items',});

blockManager.add('about-us-container',{
    label: 'About us',attributes: {class:'fa fa-cube'},content: '<section class="sect-home-about">' +
        '    <div class="container">' +
        '        <div class="title-sect">' +
        '            <h2>Über uns</h2>' +
        '        </div>' +
        '        <div class="about-wrap">' +
        '            <div class="about-line">' +
        '            </div>' +
        '        </div>' +
        '    </div>' +
        '</section>',category: 'Containers',});

截图如下：

所以我想先把“关于我们”容器放到画布上，然后用“关于我们”项目填充容器。

这是最后一个问题：

<section class="sect-home-about">
    <div class="container">
        <div class="title-sect">
            <div class="about-itm">
                <div class="about-itm-inner"><a href="#" class="about-itm-photo"><span class="img-inner-Box" id="iijxe"><img
                        src="/css/img/square.png" alt="base"/><img src="/img/about/1.png" alt="" title=""
                                                                   class="main-img"/></span></a>
                    <div class="about-itm-txt">
                        <div class="about-itm-name">Andrea</div>
                        <div class="about-itm-brief">Weit hinten,fern der Länder Vokalien und
                            Konsonantien leben die Blindtexte. Abgeschieden wohnen sie <a href="#">mehr lesen</a></div>
                    </div>
                </div>
            </div>
            <h2>Über uns</h2></div>
        <div class="about-wrap">
            <div class="about-line"></div>
        </div>
    </div>
</section>

我希望将 .about-itm 项放在 .about-line div 内，但它们出现在 .title-sect 内

感谢所有能帮助和澄清这一刻的人！

我已经向 .about-line div 添加了填充，所以现在很容易将 chilt 放在正确的位置：

blockManager.add('about-us-container',content: '<section class="sect-home-about">' +
        '    <div class="container">' +
        '        <div class="title-sect">' +
        '            <h2>Über uns</h2>' +
        '        </div>' +
        '        <div class="about-wrap">' +
        '            <div class="about-line" style="padding-top: 50px;"></div>' +
        '        </div>' +
        '    </div>' +
        '</section>',});

但我希望只有在 .about-line div 内可以放置项目。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）