card-deck drag & drop

testsort-carddeck.php

<?php

include __DIR__."/config.php";
$PAGE->set_context(context_system::instance());
$PAGE->set_url('/testsort.php');
$PAGE->set_pagelayout('admin');

echo $OUTPUT->header();
echo $OUTPUT->heading('Sortable list examples');
$dragdrop = $OUTPUT->render_from_template('core/drag_handle', ['movetitle' => get_string('move')]);
?>


            <?php
            $PAGE->requires->js_amd_inline(<<<EOT2
        require(['jquery', 'core/sortable_list'], function($, SortableList) {
            new SortableList($('.card-columns')[0], {isHorizontal: true});
            $('.card-columns .card').on(SortableList.EVENTS.DROP, function(evt, info) {
                console.log('Card events ' + evt.type);
                console.log(info);
            });
        })
EOT2
            );
            ?>

            <div class="card-deck">
                <div class="card">
                    <img class="card-img-top" src="http://placekitten.com/200/200" alt="Card image cap" width="200px" height="200px">
                    <div class="card-body">
                        <?=$dragdrop?>
                        <div class="card-title">ALPHA</div>
                        Card A = !@#
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="http://placekitten.com/200/180" alt="Card image cap" width="200px" height="200px">
                    <div class="card-body">
                        <?=$dragdrop?>
                        <div class="card-title">BETA</div>
                        Card B = !@#
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="http://placekitten.com/170/200" alt="Card image cap" width="200px" height="200px">
                    <div class="card-body">
                        <?=$dragdrop?>
                        <div class="card-title">GAMMA</div>
                        Card C = !@#
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="http://placekitten.com/200/195" alt="Card image cap" width="200px" height="200px">
                    <div class="card-body">
                        <?=$dragdrop?>
                        <div class="card-title">DELTA</div>
                        Card D = !@#
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="http://placekitten.com/195/200" alt="Card image cap" width="200px" height="200px">
                    <div class="card-body">
                        <?=$dragdrop?>
                        <div class="card-title">EPSILON</div>
                        Card E = !@#
                    </div>
                </div>
                <div class="card">
                    <img class="card-img-top" src="http://placekitten.com/195/171" alt="Card image cap" width="200px" height="200px">
                    <div class="card-body">
                        <?=$dragdrop?>
                        <div class="card-title">ZETA</div>
                        Card F = !@#
                    </div>
                </div>
            </div>

<?php
echo $OUTPUT->footer();