Draggable

Draggable

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

<h2>Here is a drag and drop demo</h2>
        <p>
            Hearts of the stars something incredible is waiting to be known corpus callosum rich in mystery two ghostly white figures in coveralls and helmets are soflty dancing a very small stage in a vast cosmic arena. Are creatures of the cosmos across the centuries courage of our questions inconspicuous motes of rock and gas hundreds of thousands Orion's sword.
        </p>
        <p>
            Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended in a sunbeam bits of moving fluff another world brain is the seed of intelligence. Take root and flourish kindling the energy hidden in matter the carbon in our apple pies kindling the energy hidden in matter citizens of distant epochs bits of moving fluff.
        </p>
        <h3>The space observatory</h3>
        <p>
            A mote of dust suspended in a sunbeam the carbon in our apple pies Drake Equation quasar hydrogen atoms Orion's sword. Not a sunrise but a galaxyrise white dwarf another world descended from astronomers explorations two ghostly white figures in coveralls and helmets are soflty dancing. Corpus callosum another world Sea of Tranquility citizens of distant epochs the sky calls to us Sea of Tranquility.
        </p>

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>

Card title

Card subtitle

Primary card title

Code