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')]);
?>
Example 1. Without handles
requires->js_amd_inline(<<
li').on(SortableList.EVENTS.DROP, function(evt, info) {
console.log('Example 1 event ' + evt.type);
console.log(info);
});
})
EOT1
);
?>
- Apple
- Orange
- Banana link
- Strawberry
Example 2. With handles
requires->js_amd_inline(<<
| Header |
|---|
| Apple |
| Orange |
| Banana link |
| Strawberry |
Example 3. Several lists
requires->js_amd_inline(<<
li').on(SortableList.EVENTS.DROP, function(evt, info) {
console.log('Example 3 event ' + evt.type);
console.log(info);
});
})
EOT3
);
?>
First list
- Apple
- Orange
- Banana link
- Strawberry
Second list
Third list
Example 4. Drop effect
requires->js_amd_inline(<<
li').on(SortableList.EVENTS.DROP, function(evt, info) {
info.element.addClass('temphighlight');
setTimeout(function() {
info.element.removeClass('temphighlight');
}, 3000);
console.log('Example 4 event ' + evt.type);
console.log(info);
});
})
EOT4
);
?>
- Apple
- Orange
- Banana link
- Strawberry
Example 5. Horizontal list
requires->js_amd_inline(<<
li').on(SortableList.EVENTS.DROP, function(evt, info) {
console.log('Example 5 event ' + evt.type);
console.log(info);
});
})
EOT3
);
?>
- Lorem ipsum
line 2
line 3
- Phasellus iaculis
line 2
line 3
- Nulla volutpat
line 2
line 3
Example 6. Hirarchy
requires->js_amd_inline(<<
*').on(SortableList.EVENTS.DROP, function(evt, info) {
console.log('Example 6 event ' + evt.type);
console.log(info);
evt.stopPropagation(); // Important for nested lists to prevent multiple targets.
});
})
EOT3
);
?>
- Folder 1
- Folder 2
- Item 2-1
- Item 2-2
- Item 2-3
- Folder 3
- Item 3-1
- Item 3-2
- Item 3-3
Example 7. Embedded lists (examples of callbacks)
requires->js_amd_inline(<<
li > h3 > [data-drag-type=move]'
});
sortSections.getElementName = sectionName;
$('.sort-example-7a > *').on('sortablelist-drop sortablelist-dragstart sortablelist-drag sortablelist-dragend', function(evt, info) {
console.log('Example 7 section event ' + evt.type);
console.log(info);
evt.stopPropagation(); // Important for nested lists to prevent multiple targets.
});
// Sort activities.
var sortActivities = new SortableList('.sort-example-7b');
sortActivities.getDestinationName = function(parentElement, afterElement) {
if (!afterElement.length) {
return sectionName(parentElement.parent()).then(function (txt) {
return str.get_string('totopofsection', 'moodle', txt);
});
} else {
return str.get_string('afterresource', 'moodle', afterElement.text());
}
};
$('.sort-example-7b > *').on('sortablelist-drop sortablelist-dragstart sortablelist-drag sortablelist-dragend', function(evt, info) {
console.log('Example 7 activity event ' + evt.type);
console.log(info);
evt.stopPropagation(); // Important for nested lists to prevent multiple targets.
});
})
EOT3
);
?>
-
Section A
-
Section B
- Item B-1
- Item B-2
- Item B-3
-
Section C
- Item C-1
- Item C-2
- Item C-3
footer();