Beautiful Sortable Drag & Drop Lists for your Blazor Apps
Ғылым және технология
Join Burke Holland and Jon Galloway as they join James Montemagno to talk about Blazor Sortable, a Blazor component enabling integration with the SortableJS library. Drag, Drop, Filter, Clone, and so much more with these sortable lists for your web apps.
Chapters:
00:00 - Intro to TheUrlist and Burke Learns Blazor
01:47 - Overview of how TheUrlist project works
03:35 - Why use SortableJS instead of HTML5 drag and drop?
06:53 - Blazor Sortable feature demo
08:25 - Making Blazor and JS libraries cooperate on DOM updates
10:50 - Demo - Using Blazor Sortable in a Blazor app
21:33 - JS Interop code explained
24:03 - Lessons learned in building the project
31:08 - Wrap up and what's next for TheUrlist
Resources:
Demo: blazorsortable.theurlist.com/
Code: github.com/the-urlist/blazors...
Connect with .NET:
Blog: aka.ms/dotnet/blog
Twitter: aka.ms/dotnet/twitter
TikTok: aka.ms/dotnet/tiktok
Mastodon: aka.ms/dotnet/mastodon
LinkedIn: aka.ms/dotnet/linkedin
Facebook: aka.ms/dotnet/facebook
Docs: learn.microsoft.com/dotnet
Forums: aka.ms/dotnet/forums
🙋♀️Q&A: aka.ms/dotnet-qa
👨🎓Microsoft Learn: aka.ms/learndotnet
#dotnet
Пікірлер: 16
great stuff!
Awesome, ty!
how can i extract the index of an item in the list?
Anyway to incorporate a Datagrid row (either from Msoft's Quickgrid or another) into the SortableItemTemplate?
@SamuelSidor
Ай бұрын
There is a fork of this functionality from AlexNek called BlazorSortableList and it works also with nested lists
Epic, would this work with nested lists?
@SamuelSidor
Ай бұрын
There is a fork of this functionality: AlexNek/BlazorSortableList and it works also with nested lists
Hot Reload? Someone out there?
mac?
@Zellyk
5 ай бұрын
Even their devs know it's better than windows.
Has anyone tried to use SortableJS in Maui Blazor? I have it working on the Windows platform. But can't get sorting to work on any other platform. The javascript breaks when it gets to this line: component.invokeMethodAsync('OnUpdateJS', event.oldDraggableIndex, event.newDraggableIndex);
@SamuelSidor
Ай бұрын
I have tried it in our MAUI Blazor project and it works correctly. I have used nuget package: AlexNek/BlazorSortableList
Looks good but I hate that it's 100% JavaScript. Kind of defeats the purpose of using Blazor, no?
@JamesMontemagno
4 ай бұрын
Well the component logic is an invoke to the javascript library, that is the point of the component so it is in C# :)
@mtranchi
Ай бұрын
Lol, once the component is built, it's 100% C# to use.