SortableJS, a JavaScript library for creating reorderable drag-and-drop lists, has been wrapped into a component for Microsoft’s Blazor web application builder and renamed Blazor Sortable.
A common feature for web application development, SortableJS supports touch devices and modern browsers, CSS animation, auto-scrolling, and smooth animations.
Unveiled January 12, Blazor Sortable has been made open source on GitHub. The GitHub repo for Blazor Sortable contains source code for the sortable list as well as demos. Developers only need the Shared/SortableList.razor, Shared/SortableList.razor.css, and Shared/SortableList.razor.js files to use Blazor Sortable. SortableList is a generic component that takes a list of items. A SortableItemTemplate then defines how to render each item in the sortable list.
Blazor itself is intended to leverage .NET and C# to build full-stack web applications without needing to write a line of JavaScript. Developers are encouraged to use Blazor Sortable now, but be aware that not every feature in the SortableJS library is yet implemented. Pull requests are invited.
SortableJS does not require an installed JQuery or other framework. The library also supports the ability to drag from one list to another or within the same list, support for CSS animation when moving items, support for CSS transformations, smooth animations, and support for technologies including the Angular TypeScript-based web framework and the Vue JavaScript framework. The library also supports JQuery.