Draggable

This example shows how to drag and drop something into Article.

    Demo

    • card-1
    • card-2
    • card-3
    Card title
    Card subtitle

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Card link Another link
    ...

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Header
    Primary card title

    Some quick example text to build on the card title and make up the bulk of the card's content.

    Code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Article Editor</title>
        <meta charset="utf-8">
    
        <!-- css -->
        <link rel="stylesheet" href="/your-article-dist-path/article-editor.min.css" />
    </head>
    <body>
        <!-- element -->
        <div style="display: flex">
            <div style="flex: auto;">
                <textarea id="entry">...</textarea>
            </div>
            <div style="width: 200px;">
                <ul>
                    <li><img src="card-1.png" data-arx-drop-id="card-01"></li>
                    <li><img src="card-2.png" data-arx-drop-id="card-02"></li>
                    <li><img src="card-3.png" data-arx-drop-id="card-03"></li>
                </ul>
            </div>
        </div>
    
        <div data-arx-drop-item="card-01" style="display: none">...html code of card 01...</div>
        <div data-arx-drop-item="card-02" style="display: none">...html code of card 02...</div>
        <div data-arx-drop-item="card-03" style="display: none">...html code of card 03...</div>
    
        <!-- js -->
        <script src="/your-article-dist-path/article-editor.min.js"></script>
    
        <!-- call -->
        <script>
        ArticleEditor('#entry', {
            css: '/your-article-dist-path/'
        });
        </script>
    </body>
    </html>

    Usage

    In the example code you can see that when dragging an image with data-arx-drop-id Article takes html code of the block from div layer with the corresponding data-arx-drop-item attribute.

    Html for the block can also be specified through settings, for example:

    ArticleEditor('#entry', {
        css: '/your-article-dist-path/',
        draggable: {
            'card-01': '...html...',
            'card-02': '...html...',
            'card-03': '...html...'
        }
    });