Skip to content

Instantly share code, notes, and snippets.

@bmbrands
Last active October 23, 2018 10:28
Show Gist options
  • Save bmbrands/e7cc45908243818bf127f04b38ff2e1b to your computer and use it in GitHub Desktop.
Save bmbrands/e7cc45908243818bf127f04b38ff2e1b to your computer and use it in GitHub Desktop.
card-deck drag & drop
<?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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment