Draggable

This example shows how to drag and drop something into Redactor X.

    Demo

    • drop-1
    • drop-2
    • drop-3

    Heading 1

    Heading 2

    Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended.

    Heading 3

    Star stuff harvesting star light kindling the energy hidden in matter a mote of dust suspended.

    Code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Redactor X</title>
        <meta charset="utf-8">
    
        <!-- css -->
        <link rel="stylesheet" href="/your-dist-path/redactorx.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="drop-1.png" data-rx-drop-id="card-01"></li>
                    <li><img src="drop-2.png" data-rx-drop-id="card-02"></li>
                    <li><img src="drop-3.png" data-rx-drop-id="card-03"></li>
                </ul>
            </div>
        </div>
    
        <div data-rx-drop-item="drop-01" style="display: none">...html code...</div>
        <div data-rx-drop-item="drop-02" style="display: none">...html code...</div>
        <div data-rx-drop-item="drop-03" style="display: none">...html code...</div>
    
        <!-- js -->
        <script src="/your-dist-path/redactorx.min.js"></script>
    
        <!-- call -->
        <script>
        RedactorX('#entry');
        </script>
    </body>
    </html>

    Usage

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

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

    RedactorX('#entry', {
        draggable: {
            'drop-01': '...html...',
            'drop-02': '...html...',
            'drop-03': '...html...'
        }
    });