can create and drag and drop pages

Management.Web/Pages/Course/Module/ModuleItems/PageListItem.razor

@@ -0,0 +1,48 @@
+@using Management.Web.Shared.Components
+@using Management.Web.Course.Module.ModuleItems
+
+@inject DragContainer dragContainer
+@inject NavigationManager Navigation
+@inject PageEditorContext pageContext
+
+@inherits DroppablePage
+
+@code {
+  private void HandleDragStart()
+  {
+    dragContainer.DropCallback = dropCallback;
+  }
+
+  private void HandleDragEnd()
+  {
+    dragContainer.DropCallback = null;
+  }
+  private bool existsInCanvas => false;
+
+
+  private void OnClick()
+  {
+    pageContext.Page = Page;
+    Navigation.NavigateTo("/course/" + planner.LocalCourse?.Settings.Name + "/page/" + Page.Name);
+  }
+}
+
+<div
+  draggable="true"
+  @ondragstart="HandleDragStart"
+  @ondragend="HandleDragEnd"
+  @onclick="OnClick"
+  role="button"
+>
+  <ModuleItemLayout Name=@Page.Name IsSyncedWithCanvas=existsInCanvas>
+    @if(!existsInCanvas)
+    {
+      <div class="mx-3 text-body-tertiary">
+        no page with same name in canvas
+      </div>
+    }
+    <div class="card-text overflow-hidden p-2">
+      <div>Due At: @Page.DueAt</div>
+    </div>
+  </ModuleItemLayout>
+</div>